Я хочу рисовать на повернутом изображении с кругом. Круг перемещается с помощью перетаскивания. Я создал JSFiddle здесь. Когда я использую degrees = 0
, он отлично работает:
Нарисованное положение правильное. Когда я меняю градусы на что-то отличное от нуля, например, degrees = 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 здесь.)
Когда я перетаскиваю оранжевый круг по повернутому изображению, положение рисунка отличается от положения оранжевого круга.
То, что я пробовал, было в моей функции рисования:
context.translate(canvas.width / 2, canvas.height / 2);
context.rotate(degrees * Math.PI/180);
но это не работает. Он не показывает правильную позицию рисования.
Как получить правильную позицию рисования на повернутом изображении?