javascript canvas 如何对图片进行绕中心点旋转
需要做一个在canvas里对图片进行拖拽、缩放、旋转的一个小应用。现在可以拖拽,旋转有个问题,不好解决,demo代码大概80行代码的样子,希望路过的朋友指点下,谢谢!(我...
需要做一个在canvas里对图片进行拖拽、缩放、旋转的一个小应用。现在可以拖拽,旋转有个问题,不好解决,demo代码大概80行代码的样子,希望路过的朋友指点下,谢谢!(我觉得问题出在转换坐标系过程了,但是不是很明白,求指点。)
自己研究了好一阵子,始终没有没有突破,希望得到技术大牛指点,最好是完善下我下面链接里的demo,谢谢!
http://youryida.duapp.com/other/drag_rotate/ 展开
自己研究了好一阵子,始终没有没有突破,希望得到技术大牛指点,最好是完善下我下面链接里的demo,谢谢!
http://youryida.duapp.com/other/drag_rotate/ 展开
展开全部
给你一个旋转的demo:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<br/>
<input type="text" id="angle_v" readonly="1"/>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.translate(100,45)
//ctx.rotate(70*Math.PI/180);
//ctx.fillRect(-50,-25,100,50);
var angle=10;
var angle_now = 0;
myRotate()
function myRotate()
{
ctx.clearRect(-100,-50,200,100);//x2 是为了把原来的图全部抹掉(不留下痕迹)
ctx.rotate(angle*Math.PI/180);
ctx.fillRect(-50,-25,100,50);
angle_now= (angle_now + angle)%360;
document.getElementById("angle_v").value="当前角度:"+angle_now;
setTimeout(myRotate,1000);
}
</script>
</body>
</html>
注意:用roate实现旋转,重点在于改变坐标中心点 : ctx.translate(100,45)
坐标中心点计算公式:x = 左上角x + 宽度/2
y = 左上角y + 高度/2
然后translate到(x,y)即可,之后调用rotate进行旋转。
旋转之后填充时注意:ctx.fillRect(-50,-25,100,50);
x = - 宽度/2
y = -高度/2
fillRect(x,y,宽度,高度)
你的例子,代码控制比较看不懂。。。,所以没在基础上整改。
补充一个参考网站(英文的):http://tutorials.jenkov.com/html5-canvas/transformation.html
(如果有帮助,望采纳,谢谢)
追问
谢谢你的回答,可能我没说明白,我要做的是鼠标拖动旋钮控制图片绕中心点旋转。我的代码里已经实现了绕中心旋转,只是有一些问题,并且转一下再拖拽图片的时候会有问题。
我现在找到问题所在了,因为canvas绘图函数drawImage,只能指定左上角坐标然后竖直绘制。如果旋转后再拖拽的话,需要记住旋转的角度,并且在拖拽的时候,改变位置+旋转。
我去改改代码哈!
追答
问题已经解决,chrome下测试通过,但是百度字数限制不然传,要不楼主把分给我再开一个问题(唉,我就差两个问题升级到7了,纠结了很久)
写完了,耗时两天。把你需求改了下:
(在图片上单击时则为移动图片---包括激活和关闭。 在图片外单击则为旋转图片---如果鼠标移动到图片上则自动关闭旋转模式)
代码发到你的百度私信了。望采纳。谢谢
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询