如何在不同的方向上多次繪製一幅圖像？

我有一個這樣的數組，想法是在不同的方向輸出圖像，並通過縮放垂直和水平地在畫布上翻轉它們。如何在不同的方向上多次繪製一幅圖像？

[{ 
    "pos":{ 
     "x":411, 
     "y":401.5 
    }, 
    "scale":{ 
     "x":1, 
     "y":1 
    } 
},{ 
    "pos":{ 
     "x":411, 
     "y":271.59625 
    }, 
    "scale":{ 
     "x":-1, 
     "y":1 
    } 
}]

問題是，我縮放畫布而不是圖像，畫布比我放置的圖像多倍。

images.forEach((image) => { 
    // center borde köars innan loopen egentligen 
    let pos = center(image.pos) 
    cc.save() 
    cc.scale(image.scale.x, image.scale.y) 
    cc.drawImage(window.video, pos.x, pos.y) 
    cc.restore() 
    })

如何縮放名爲window.video而不是整個畫布的圖像？

來源

2017-02-27 Himmators

-1

編輯：如下文所述，這不符合負值工作...

的drawImage可以採取2個額外的論據，圖像大小，所以下面應該工作：

images.forEach((image) => { 
    // center borde köars innan loopen 
    let pos = center(image.pos) 
    cc.save() 
    cc.drawImage(window.video, pos.x, pos.y, window.video.width * image.scale.x, window.video.height * image.scale.y) 
    cc.restore() 
})

文檔：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

來源

2017-02-27 18:10:29 BenShelton

我想它的中心，但那些只適用於正數，似乎不適用於規模。我發現這個問題，但不要rellay得到我怎麼可以使用這些答案http://stackoverflow.com/questions/29237305/how-to-flip-an-image-with-the-html5-canvas-without-縮放 – Himmators

如果您使用原始代碼，但將drawImage中的寬度和高度指定爲window.video的高度和寬度，這是否正常工作？ – BenShelton

是的，但是我想在dWidth和dHeight上使用負值，所以我不能使用它們。 dWidth和dHeight只能使用正值。 – Himmators

在畫布上呈現縮放的圖像。

function drawImage(image,x,y,scaleX,scaleY){ 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    ctx.drawImage(image,0,0); 
} 

// when done drawing images you need to reset the transformation back to default 
ctx.setTransform(1,0,0,1,0,0); // set default transform

如果您希望圖像翻轉，但在同一左上角位置還繪製使用

function drawImage(image, x, y, scaleX, scaleY){ 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    x = scaleX < 0 ? -image.width : 0; // move drawing position if flipped 
    y = scaleY < 0 ? -image.height : 0; 
    ctx.drawImage(image, x, y); 
}

，並提請有關圖像

function drawImage(image, x, y, scaleX, scaleY){ // x y define center 
    ctx.setTransform(scaleX, 0, 0, scaleY, x, y); // set scale and translation 
    ctx.drawImage(image, -image.width/2, -image.height/2); 
}

來源

2017-02-28 02:26:26 Blindman67

如何在不同的方向上多次繪製一幅圖像？

回答

相關問題