0
我有一個畫布元素,我與context.rotate()旋轉;公式翻譯xy運動與旋轉
當我在畫布圖像周圍拖動如果我旋轉可以說90度,以及i移動到左側時,圖像向下移動,
是有其中我能將的 一個移動式例如 x + 5 y + 2 *度
我得到真正的運動我需要做的移動旋轉的畫布在我想要的方向嗎?我想將它應用到這個函數與向左移動不需要的效應和形象工程,但向下移動`
vm.canvasMouseMove = function (event) {
vm.delta = Date.now();
if (vm.mouseisdown && vm.delta - vm.now > (1000/60) && (event.clientX > 0 && event.clientY > 0)) {
vm.now = vm.delta
vm.snapshot.mouse.x -= event.clientX;
vm.snapshot.offsetSlider.value -= vm.snapshot.mouse.x;
if (vm.snapshot.offsetSlider.value < -160) {
vm.snapshot.offsetSlider.value = -160
}
else if (vm.snapshot.offsetSlider.value > 160) {
vm.snapshot.offsetSlider.value = 160
}
vm.snapshot.mouse.y -= event.clientY;
vm.snapshot.verticalOffsetSlider.value += vm.snapshot.mouse.y;
if (vm.snapshot.verticalOffsetSlider.value < -120) {
vm.snapshot.verticalOffsetSlider.value = -120
}
else if (vm.snapshot.verticalOffsetSlider.value > 120) {
vm.snapshot.verticalOffsetSlider.value = 120
}
vm.snapshot.mouse.x = event.clientX;
vm.snapshot.mouse.y = event.clientY;
}
};`
這吸引
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(vm.snapshot.rotationSlider.value * Math.PI/180);
ctx.drawImage(image, vm.snapshot.offsetSlider.value - (canvas.width/2), (vm.snapshot.verticalOffsetSlider.value * -1) - (canvas.height/2), vm.scaledImageW * vm.snapshot.zoomSlider.value/100, vm.scaledImageH * vm.snapshot.zoomSlider.value/100);
ctx.rotate(-1 * vm.snapshot.rotationSlider.value * Math.PI/180);
ctx.translate(-canvas.width/2, -canvas.height/2);
vm.donePicture = canvas.toDataURL();