javascript - 在旋转图像上绘制的绘制位置错误？

Question

我想在旋转图像上绘制一个圆圈。通过拖放来移动圆圈。我创建了一个 JSFiddle here 。当我使用度= 0时它工作正常:

绘制的位置是正确的。当我将度数更改为非零时，例如，度数= 45，我得到以下结果:

应指向绘制位置的橙色圆圈的位置不同。

这是我使用的代码:

console.clear();

var history = new Array();

var imageObj = new Image();
var img = null;
var offsetX = 0;
var offsetY = 0;
var degrees = 45;

stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 400
});
layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
    x: 50,
    y: 50,
    width: 438,
    height: 300,
    fill: 'yellow'
});
layer.add(rect);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');


var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
    opacity: 0.7,
    fill: '#ff5e0a',
    stroke: '#d95009',
    strokeWidth: 1,
    draggable: true
});
layer.add(circle);


circle.on('dragmove touchmove', function (e) {
    draw(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
});


imageObj.onload = function () {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);


    img = new Konva.Image({
        x: 50,
        y: 50,
        image: canvas
    });

    img.setRotation(degrees);

    offsetX = imageObj.width / 2;
    offsetY = imageObj.height / 2;

    img.setOffsetX(offsetX);
    img.setOffsetY(offsetY);
    img.x(img.x() + offsetX);
    img.y(img.y() + offsetY);


        // translate context to center of canvas
  //  context.translate(canvas.width / 2, canvas.height / 2);

  //  context.rotate(degrees * Math.PI/180);


    layer.add(img);

    circle.moveToTop();
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";




function draw(absX, absY, radius, imageX, imageY) {
    var x = 0;
    var y = 0;

    // set pointer
    circle.x(absX);
    circle.y(absY);

    imageX = imageX - (offsetX);
    imageY = imageY - (offsetY);

    x = absX - imageX;
    y = absY - imageY;

    // translate context to center of canvas
  //  context.translate(canvas.width / 2, canvas.height / 2);

 //   context.rotate(degrees * Math.PI/180);

    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fill();

    layer.draw();
}

(完整示例位于我的 JSFiddle here 中。)

当我将橙色圆圈拖动到旋转图像上时，绘图的位置与橙色圆圈所在的位置不同。

我尝试的是在我的绘图函数中:

context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI/180);

但这不起作用。它没有显示正确的绘制位置。

如何在旋转图像上获得正确的绘制位置？

Answer 1

解决方案如下:http://jsfiddle.net/confile/8cxp8pa4/

console.clear();

var history = new Array();

var imageObj = new Image();
var img = null;
var offsetX = 0;
var offsetY = 0;
var degrees = 45;

stage = new Konva.Stage({
    container: 'container',
    width: 600,
    height: 400
});
layer = new Konva.Layer();
stage.add(layer);

var rect = new Konva.Rect({
    x: 50,
    y: 50,
    width: 438,
    height: 300,
    fill: 'yellow'
});
layer.add(rect);

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');


var circle = new Konva.Circle({
    x: 0,
    y: 0,
    radius: 40,
    opacity: 0.7,
    fill: '#ff5e0a',
    stroke: '#d95009',
    strokeWidth: 1,
    draggable: true
});
layer.add(circle);


circle.on('dragmove touchmove', function (e) {
    draw(e.evt.clientX, e.evt.clientY, circle.radius(), img.x(), img.y());
});


imageObj.onload = function () {
    canvas.width = imageObj.width;
    canvas.height = imageObj.height;
    context.drawImage(imageObj, 0, 0, imageObj.width, imageObj.height);

    var imgX = 50;
    var imgY = 50;

    img = new Konva.Image({
        x: imgX,
        y: imgY,
        image: canvas
    });

    img.setRotation(degrees);

    offsetX = imageObj.width / 2;
    offsetY = imageObj.height / 2;

    var rotationX = imgX + offsetX;
    var rotationY = imgY + offsetY;

    img.setOffsetX(offsetX);
    img.setOffsetY(offsetY);
    img.x(rotationX);
    img.y(rotationY);

    context.translate(canvas.width/2, canvas.height/2);

    context.rotate(-degrees * Math.PI/180);


    layer.add(img);

    circle.moveToTop();
    layer.draw();
};

imageObj.crossOrigin = "anonymous";
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/darth-vader.jpg";




function draw(absX, absY, radius, imageX, imageY) {
    var x = 0;
    var y = 0;

    var c2 = $("#container2")[0];
    var ctx2 = c2.getContext('2d');
    c2.width = canvas.width;
    c2.height = canvas.height;
    ctx2.clearRect( 0 , 0 , canvas.width, canvas.height);
    ctx2.drawImage(canvas, 0,0, canvas.width, canvas.height);

    // set pointer
    circle.x(absX);
    circle.y(absY);

   // imageX = imageX - (offsetX);
   // imageY = imageY - (offsetY);

    x = absX - imageX;
    y = absY - imageY;

    // translate context to center of canvas
  //  context.translate(canvas.width / 2, canvas.height / 2);

 //   context.rotate(degrees * Math.PI/180);

    context.beginPath();
    context.arc(x, y, radius, 0, 2 * Math.PI);
    context.fill();

    layer.draw();
}