spostamento della posizione iniziale del modello di tela

Ho un codice:spostamento della posizione iniziale del modello di tela

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(); 
}

Come posso spostare la posizione iniziale dell'immagine modello di?

fonte

2011-10-08 GLeBaTi

È possibile raggiungere questo obiettivo traducendo la tela, disegnando su di essa, e poi tradurlo indietro al punto di partenza:

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(); 
}

fonte

2011-10-08 20:57:43 Xenethyl

@GLeBaTi Ho appena modificato il codice che ho postato qui leggermente. Il cambiamento importante è che la chiamata a 'fillRect()' riempie solo una regione della dimensione richiesta (es .: 'fill_x' e' fill_y') perché passiamo l'origine come nostro offset. Ho anche modificato i segni sull'offset utilizzato per le chiamate di traduzione per rendere i risultati un po 'più intuitivi. – Xenethyl

In risposta alla risposta accettata: invece di annullare l'offset, userei save() & restore() per evitare potenziali problemi:

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

fonte

2013-03-12 00:46:05 cacheflowe

'save' e' restore' sembra un modo più ordinato di farlo. – mokagio

Per qualcosa di banale come applicare una singola trasformazione al contesto non raccomanderei l'uso di 'save()' e 'restore()'. C'è un sovraccarico associato alla manipolazione dello stack di stato (anche se minimo), e se lo fai per ogni semplice trasformazione, subirai un colpo di performance non necessario. Vedi questo jsPerf (di cui non mi rendo conto) per un rapido confronto: http://jsperf.com/canvas-transform-vs-save-restore/2 – Xenethyl

Poco più di un anno dopo, il perf-test qui sopra ora dice che salva/ripristina è più veloce della ri-traduzione (almeno in Firefox e Chrome su OS X). Per qualcosa di semplice, i problemi di prestazioni non devono necessariamente superare la semplicità e la leggibilità. Ma, come con qualsiasi codice, tutti abbiamo le nostre preferenze personali :) – cacheflowe

più generali, le trasformazioni complesse del modello solo sono facilmente fatto. Il trucco è eseguirli immediatamente prima della chiamata 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(); 
}

fonte

2016-11-16 18:06:25

spostamento della posizione iniziale del modello di tela

risposta

Problemi correlati