【发布时间】：2018-03-07 08:28:16
【问题描述】：
我想在鼠标移动时在画布上旋转一个形状，我想检测鼠标是否在clockwise direction 中移动，但我不知道该怎么做。这是我的代码：
var canvas = document.getElementById('canvas');
var img = document.getElementById('photo');
var ctx = canvas.getContext('2d');
var annotation_rect = canvas.getBoundingClientRect();
rect = {
startX : 150,
startY : 50,
w : 250,
h : 150,
endX : 0,
endY : 0,
rotate: 0
};
var drag = false;
var rotating = false;
var update = true; // when true updates canvas
var rotate_angle = 5; // in degrees - for rotating blurred part
var angle = rotate_angle * (Math.PI / 180);
var original_source = img.src;
img.src = original_source;
function rotateRight(){
rect.rotate += angle;
update = true;
}
function rotateLeft(){
rect.rotate -= angle;
update = true;
}
function init() {
img.addEventListener('load', function(){
canvas.width = img.width;
canvas.height = img.height;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
});
// start the rendering loop
requestAnimationFrame(updateCanvas);
}
// main render loop only updates if update is true
function updateCanvas(){
if(update){
drawCanvas();
update = false;
}
requestAnimationFrame(updateCanvas);
}
// draws a rectangle with rotation
function drawRect(){
ctx.setTransform(1,0,0,1,rect.startX + rect.w / 2, rect.startY + rect.h / 2);
ctx.rotate(rect.rotate);
ctx.beginPath();
ctx.shadowBlur = 5;
ctx.filter = 'blur(10px)';
ctx.rect(-rect.w/2, -rect.h/2, rect.w, rect.h);
ctx.lineWidth = 3;
ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";
ctx.fill();
ctx.stroke();
}
// clears canvas sets filters and draws rectangles
function drawCanvas(){
ctx.setTransform(1,0,0,1,0,0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
drawRect()
}
// create new rect add to array
function mouseDown(e) {
drag = true;
}
function mouseUp() { drag = false; update = true; }
function startRotation(e){
rotating = true;
}
function stopRotation(e){
rotating = false;
}
function onShapeRotating(e){
if(rotating){
rotateRight();
}
}
function mouseMove(e) {
var mouseX = e.offsetX - annotation_rect.left,
mouseY = e.offsetY - annotation_rect.top,
endX = rect.startX + rect.w,
endY = rect.startY + rect.h
var cursorOnShape = mouseX >= rect.startX && mouseX <= endX && mouseY >= rect.startY && mouseY <= endY;
if(cursorOnShape){
canvas.style.cursor = "pointer"
canvas.addEventListener('mousedown', startRotation, false);
canvas.addEventListener('mouseup', stopRotation, false);
canvas.addEventListener('mousemove', onShapeRotating, false);
}else{
canvas.style.cursor = "default"
canvas.removeEventListener('mousedown', startRotation, false);
canvas.removeEventListener('mouseup', stopRotation, false);
canvas.removeEventListener('mousemove', onShapeRotating, false);
}
}
init();canvas{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display:inline-block;
background:rgba(0,0,0,0.3);
}<div style="position: relative; overflow: hidden;display:inline-block;">
<img id="photo" src="https://carsales.pxcrush.net/carsales/car/cil/cc5166737225893351785.jpg?width=600&height=300&overlay&aspect=FitWithIn&watermark=1439104668"/>
<canvas id="canvas"></canvas>
</div>因此我在画布上绘制了一个矩形，我检测鼠标是否在该矩形上，如果是，我调用函数rotateShape，然后调用函数rotateRight。这是有效的。如果您使用鼠标在矩形上并按下并旋转它会旋转矩形调用函数rotateRight。
但我希望能够检查鼠标是否顺时针方向移动。如果它顺时针方向移动，我会打电话给rotateRight，如果不是，我会打电话给rotateLeft。
知道怎么做吗？
【问题讨论】：
-
var 弧度 = Math.atan2(mouse_x - center_x, mouse_y - center_y);我的意思是使用你的对象的这个中心。
-
@nullqube 你能把它应用在小提琴里吗？
-
-
@nullqube 这不是真的。小提琴工作正常。我有更多的代码，但我试图让小提琴更简单。显然你没看懂。
标签： javascript canvas rotation html5-canvas