하나의 이미지를 다른 방향으로 여러 번 그리는 방법은 무엇입니까?

Question

저는 이런 식으로 배열을 가지고 있습니다. 아이디어는 다른 방향으로 이미지를 출력하고 크기 조정을 통해 캔버스에 수직 및 수평으로 뒤집는 것입니다.

[{ 
    "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라는 이미지를 어떻게 스케일합니까? 다음과 같은 일을해야하므로

의 drawImage는, 이미지 크기를 조정하기위한 2 개 여분의 인수를 취할 수 아래에 언급 한 바와 같이,이 음의 값 작동하지 않습니다 ... :

Answer 1

편집

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

Answer 2

캔버스에 크기 조정 된 이미지를 렌더링합니다.

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