Нарисовано на повернутом изображении неправильное положение ничьей?

Question

Я хочу нарисовать повернутое изображение с кругом. Круг перемещается с перетаскиванием. Я создал JSFiddle here. Когда я использую degrees = 0 он работает отлично:

положение, которое рисуется правильно. Когда я изменяю градусов нечто отличное от нуля, например, degrees = 45 я получаю следующий результат:

Положение оранжевого круга, который должен указывать на положение дро отличается.

Вот код, я использую: (. Полный пример в моей JSFiddle here)

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

Когда я перетащить оранжевый круг над повернутым изображением на чертеже имеет другую позицию, чем оранжевый круг.

То, что я попытался было в моей функции рисования:

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