Я пытаюсь сделать объект изображения вращенным в соответствии с нажатием мыши на этом изображении и углом мыши до центра объекта.kineticjs вращаются с углом мыши
Подумайте о единичном круге и поверните изображение вокруг круга, основываясь на том, где мышь находится на этом круге.
я в настоящее время
var stage = new Kinetic.Stage({
container: "container",
width: 800,
height: 500,
id: "myCanvas",
name: "myCanvas"
});
var layer = new Kinetic.Layer();
//gets the canvas context
var canvas = stage.getContainer();
var mousePosX;
var mousePosY;
var mouseStartAngle;
var selectedImage;
var mouseAngle;
var mouseStartAngle;
console.log(canvas)
var shiftPressed
window.addEventListener('keydown', function (e) {
if (e.keyCode == "16") {
shiftPressed = true;
}
console.log(shiftPressed)
}, true);
window.addEventListener('keyup', function (e) {
if (e.keyCode == "16") {
shiftPressed = false;
}
console.log(shiftPressed)
}, true);
function drawImage(imageObj) {
var dynamicImg = new Kinetic.Image({
image: imageObj,
x: stage.getWidth()/2 - 200/2,
y: stage.getHeight()/2 - 137/2,
width: 100, //imageObj.width,
height: 100, // imageObj.height,
draggable: true,
offset: [50,50] //[(imageObj.width/2), (imageObj.height/2)]
});
dynamicImg.on('mousedown', function() {
selectedImage = this;
console.log("x: " + this.getX())
console.log("y: " + this.getY())
var mouseStartXFromCenter = mousePosX - (this.getX() + (this.getWidth()/2));
var mouseStartYFromCenter = mousePosY - (this.getY() + (this.getHeight()/2));
mouseStartAngle = Math.atan2(mouseStartYFromCenter, mouseStartXFromCenter);
if (shiftPressed) {
//console.log("trying to switch draggable to false");
//console.log(this)
this.setDraggable(false);
}
});
dynamicImg.on('mouseup mouseout', function() {
//console.log('mouseup mouseout')
this.setDraggable(true);
});
dynamicImg.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
dynamicImg.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imageArray.push(dynamicImg);
layer.add(dynamicImg);
stage.add(layer);
}
var imageObj = new Image();
imageObj.onload = function() {
drawImage(this);
};
imageObj.src = 'http://localhost:60145/Images/orderedList8.png';
function getMousePos(evt) {
var rect = canvas.getBoundingClientRect();
return {
x: evt.clientX - rect.left,
y: evt.clientY - rect.top
};
}
canvas.addEventListener('mouseup', function() {
selectedImage = undefined;
});
canvas.addEventListener('mousemove', function (evt) {
mousePos = getMousePos(evt);
//console.log('Mouse position: ' + mousePos.x + ',' + mousePos.y)
mousePosX = mousePos.x;
mousePosY = mousePos.y;
if (selectedImage != undefined) {
mouseXFromCenter = mousePosX - selectedImage.getX();
mouseYFromCenter = mousePosY - selectedImage.getY();
mouseAngle = Math.atan2(mouseYFromCenter, mouseXFromCenter);
var rotateAngle = mouseAngle - mouseStartAngle;
selectedImage.setRotation(rotateAngle);
}
}, false);
код имеет пару вещей к нему. -Он должен только поворачивать, если нажата клавиша «shift», а на изображении происходит событие mousedown.
-it необходимо поддерживать динамический рисунок изображения, поскольку они будут динамически заполнять холст в течение всего срока службы страницы.
вот хороший пример того, что я хочу, но просто не могу заставить его работать в canvas/kineticjs. http://jsfiddle.net/22Feh/5/
Вы можете разместить свой текущий код в jsfiddle? – SoluableNonagon
Я положил его с квадратом, так как изображение, похоже, правильно вращается на некоторых щелчках, но никогда не вычисляет mousedown или «setRotation». Я не уверен, какой он есть. http://jsfiddle.net/WXHe6/ – kevindstanley
Я отправил два ответа, второй, я думаю, это то, что вы искали. Извините за длинный первый первый, я его проанализировал. – SoluableNonagon