Mover la posición inicial de la lona del modelo

Tengo un código:Mover la posición inicial de la lona del modelo

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
    // create pattern 
    var ptrn = ctx.createPattern(img,'repeat'); 
    ctx.fillStyle = ptrn; 
    ctx.fillRect(0,0,150,150); 
    } 
    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
}

¿Cómo puedo mover la posición de inicio imagen Modelo de?

Fuente

2011-10-08 GLeBaTi

Esto se puede conseguir mediante la traducción de la tela, a partir de ella, y luego traducir de nuevo al punto de partida:

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
     // create pattern 
     var ptrn = ctx.createPattern(img,'repeat'); 
     ctx.fillStyle = ptrn; 

     // offset vars 
     var offset_x = 60; 
     var offset_y = 75; 
     var fill_x = 500; // could be canvas.width 
     var fill_y = 500; // could be canvas.height 

     // offset 
     ctx.translate(offset_x, offset_y); 

     // draw 
     ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y); 

     // undo offset 
     ctx.translate(-offset_x, -offset_y); 
    } 
    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
}

Fuente

2011-10-08 20:57:43 Xenethyl

@GLeBaTi Acabo de editar el código que publiqué aquí ligeramente. El cambio importante es que la llamada a 'fillRect()' solo ocupa una región del tamaño que solicita (es decir, 'fill_x' y' fill_y') porque pasamos el origen como nuestro desplazamiento. También ajusté los signos del desplazamiento utilizado para las llamadas de traducción para hacer que los resultados sean un poco más intuitivos. – Xenethyl

En respuesta a la respuesta aceptada: en lugar de deshacer el desplazamiento, me gustaría utilizar save() & restore() para evitar posibles problemas:

ctx.save(); 
ctx.translate(offset_x, offset_y); 
ctx.fillRect(-offset_x, -offset_y, fill_x, fill_y); 
ctx.restore();

Fuente

2013-03-12 00:46:05 cacheflowe

'save' y' restore' parece una forma más ordenada de hacerlo. – mokagio

Para algo tan trivial como aplicar una sola transformación al contexto, no recomendaría usar 'save()' y 'restore()'. Hay una sobrecarga asociada con la manipulación de la pila de estado (aunque mínima), y si haces esto para cada transformación simple estarás teniendo un golpe de rendimiento innecesario. Vea este jsPerf (del cual no me atribuyo ningún mérito) para una comparación rápida: http://jsperf.com/canvas-transform-vs-save-restore/2 – Xenethyl

Un poco más de un año después, la prueba de rendimiento anterior dice ahora que guardar/restaurar es más rápido que volver a traducir (al menos en Firefox y Chrome en OS X). Para algo tan simple, las preocupaciones sobre el rendimiento no deberían necesariamente superar la simplicidad y la legibilidad. Pero, como con cualquier código, todos tenemos nuestras preferencias personales :) – cacheflowe

Más transformaciones generales y complejos del patrón solo se hacen fácilmente. El truco consiste en hacerlos inmediatamente antes de la llamada a fill() o stroke().

function draw(ctx) { 
    // create new image object to use as pattern 
    var img = new Image(); 
    img.onload = function(){ 
     // create pattern 
     var ptrn = ctx.createPattern(img,'repeat'); 
     ctx.fillStyle = ptrn; 
     ctx.beginPath(); 
     ctx.rect(0, 0, 150, 150); 

     ctx.translate(-33, -33); 
     ctx.fill(); 
    } 

    img.src = 'images/wallpaper.png?' + new Date().getTime(); 
}

Fuente

2016-11-16 18:06:25

Mover la posición inicial de la lona del modelo

Respuesta

Cuestiones relacionadas