kineticjs вращаются с углом мыши

Question

Я пытаюсь сделать объект изображения вращенным в соответствии с нажатием мыши на этом изображении и углом мыши до центра объекта.

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

я в настоящее время

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/

Answer 1

Ошибка моя ошибка, я неверно сформулировал ваш вопрос. Вы, по существу, не указали одну строку:

layer.draw(); 

Удерживайте сдвиг и перемещайте мышь, вы увидите, что она вращается красиво. http://jsfiddle.net/WXHe6/2/

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); 
      layer.draw(); // <--------------- right here 
    } 
    }, false); 

Answer 2

Вам должно быть более ясно, что делают ваши события .on(). В вашем коде мышь на фигуре не делает ничего, кроме вычисления mouseStartAngle, но ничего не делает. И ваш mouseUp на событии формы тоже не так много. Это ваш браузер/клиент mousedown/mouseup, которые выполняют всю работу, и именно поэтому он вращается правильно на некоторых кликах, а не на других.

Для установки вращения у вас есть много вариантов, вот два:

Вариант один: установить радиан вручную на MouseDown

dynamicImg.on('mousedown', function() { 
    dynamicImg.setRotation(mouseStartAngle); //set the rotation degree 
    layer.draw(); // redraw the layer 
    } 

Вариант два: пусть kineticJS анимировать вращение для вас

dynamicImg.on('mousedown', function() { 
    dynamicImg.transitionTo({ 
     duration: 1,  // length of animation in seconds 
     rotation: mouseStartAngle // your angle, in radians 
    }); 
    } 

ваш обновленный jsfiddle: http://jsfiddle.net/WXHe6/1/

Вот некоторые дополнительные примечания:

Причина, по которой у вас возникли проблемы, заключается в том, что ваш код структурирован, это немного грязная манера, к сожалению. Вы смешиваете события браузера с добавлением слушателей на холст, а не с помощью встроенных функций kineticJS, например, вы можете использовать stage.getUserPosition() для получения координат мыши. Если у вас нет крайней необходимости структурировать свой проект таким образом, постарайтесь избежать его.

Что мне нравится, так это то, что вы создали функции для разложения кода, но на стороне вниз у вас есть несколько функций, выполняющих то же самое, например, вычисление и обновление угла поворота. Почему бы просто не сделать одну функцию, чтобы получить угол?

Некоторые советы:

1. Попробуйте использовать в основном для KineticJS функциональности (я знаю, что вы будете нуждаться в обработчики событий для кнопок как SHIFT). Я имею в виду использование таких вещей, как stage.getUserPosition(); чтобы получить координаты мыши/касания, а не evt.clientX, он чище, и работа уже выполнена для вас, нет необходимости повторно изобретать колесо.

2. Сделать одну функцию для установки/получения вращения для фигуры. Тогда вы можете позвонить, когда захотите.(используйте менее повторяющийся код)

3. Если вы не хотите, чтобы фигура была перетаскиваемой при щелчке по смене, вы должны установить ее перед щелчком элемента. У вас есть кнопки-слушатели, поэтому вы можете отключить вращение для всех фигур при нажатии на сдвиг или просто для фигуры, находящейся под курсором.

4. imageArray.push (dynamicImg); не уверен, действительно ли вам это нужно, если вам нужно получить доступ ко всем элементам в виде массива, вы всегда можете сделать layer.getChildren(); получить все изображения в слое или получить доступ к ним в численном виде подобно layer.getChildren() [0]; (в порядке составления)

Answer 3

Я бы простой способ использования dragBoundFunc. http://jsfiddle.net/bighostkim/vqGmL/

dragBoundFunc: function (pos, evt) { 
    if (evt.shiftKey) { 
     var x = this.getX() - pos.x; 
     var y = this.getY() - pos.y; 
     var radian = Math.PI + Math.atan(y/x); 
     this.setRotation(radian); 
     return { 
      x: this.getX(), 
      y: this.getY() 
     } 
    } else { 
     return pos; 
    } 
}