Вращать прямоугольник с помощью мыши scroll kineticjs

Как повернуть прямоугольник с помощью мыши с помощью кинетики? Ниже ссылка показывает вращающуюся форму с jquery на mousedown. Но я хочу использовать mousewheel событие, а не mousePos, так как мои прямоугольники перетаскиваются. http://www.lonhosford.com/content/html5/canvas/rotate_to_mouse.html Вращать прямоугольник с помощью мыши scroll kineticjs

источник

2013-10-15 user2330678

Я создал jsFiddle для тех, кто заинтересован: HTTP : //jsfiddle.net/MrPolywhirl/FXb6P/ –

@ Mr.Polywhirl: +1 для приятной демонстрации формы, автоматически вращающейся в положение мыши. – markE

Спасибо за ваш ответ, но я хочу повернуть прямоугольники с помощью KineticJS – user2330678

KineticJS не изначально отслеживать события в колесиках.

Вы можете использовать jQuery + плагин для мыши, чтобы принимать события мыши.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script>

Почему jQuery?

Вы можете отслеживать события в mousewheel без плагина jQuery +, но события mousewheel еще не стандартизированы в разных браузерах, поэтому решение с несколькими браузерами, не использующее jQuery, будет сложным.

Вот как слушать MouseWheel событий на контейнере стадии и повернуть Rect:

// set this variable to refer to the KineticJS rect you want to rotate 

var theRectToRotate  

// set this variable to the number of degrees to rotate when the user mousewheels 

var degreeRotationPerMousewheelDelta=5; 

// Use jQuery to listen for mousewheel events 
// Then rotate the specified rect by the specified degree 

$("#container").mousewheel(function(event, delta, deltaX, deltaY){ 
    theRectToRotate.rotateDeg(delta* degreeRotationPerMousewheelDelta); 
    layer.draw(); 
    event.preventDefault(); 
});

Вот код и Fiddle: http://jsfiddle.net/m1erickson/kXJ5q/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> 
    <script src="="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.3/jquery.mousewheel.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:300px; 
    height:300px; 
} 
</style>   
<script> 
$(function(){ 

    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 300, 
     height: 300 
    }); 
    var layer = new Kinetic.Layer(); 
    stage.add(layer); 


    $("#container").mousewheel(function(event, delta, deltaX, deltaY){ 
     console.log(delta+": "+deltaX+"/"+deltaY); 
     rect.rotateDeg(delta*5); 
     layer.draw(); 
     event.preventDefault(); 
    }); 

    var rect = new Kinetic.Rect({ 
     x: 100, 
     y: 100, 
     width: 100, 
     height: 70, 
     offset:[50,35], 
     fill: 'skyblue', 
     stroke: 'lightgray', 
     strokeWidth: 3 
    }); 
    layer.add(rect); 


    layer.draw(); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <h3>Use mousewheel to rotate the rect</h3> 
    <h5>This requires a plugin:</h5> 
    <h5>https://github.com/brandonaaron/jquery-mousewheel </h5> 
    <div id="container"></div> 
</body> 
</html>

источник

2013-10-15 19:30:02 markE

markE: Спасибо за ответ выше. Ваш код работает, но можете ли вы предоставить мне решение с использованием KineticJS для IE9 и IE10? – user2330678

yup it does not, но я предпочту использовать KinetcJS – user2330678

И меня касается только IE. Поддержка Chrome будет бонусом, но поддержка других браузеров не имеет значения. – user2330678

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

Для этого вам необходимо установить колесо событияDelta, проверить, является ли оно положительным или отрицательным, и поверните на заданный угол вашего прямоугольника так, как rect.setRotation(mySetAngleInRadians * isNegativeAngle), затем перерисуйте слой.

Если вы хотите непрерывной прокрутки, то вам нужно handle the cases where it isn't supported и принять решение о значении расстояния прокрутки, которое соответствует 360 градусов (полный круг), а затем сделать что-то вроде:

rect.setRotation(ev.wheelDelta/fullScrollDistance * 2 * Math.PI)

источник

2013-10-15 18:48:27 qternion

hey qterton, не могли бы вы объяснить термины. В частности, fullScrollDistance. Если он будет высоким или низким, я хочу повернуть прямоугольники вокруг их центра. И да, я знаю, как выбрать прямоугольник. – user2330678

Вращать прямоугольник с помощью мыши scroll kineticjs

ответ

Смежные вопросы