画布图像编辑器 [英] Canvas Image editor
问题描述
我正在尝试使用画布制作图像编辑器,但是在调整旋转图像的大小时遇到了一些问题.我调整大小的锚点和图像似乎没有对齐.
I'm trying to make an image editor with canvas, but I ran into some problems with re-sizing an rotated image. My re-size anchors and the image do not seem to line up as they should.
http://jsbin.com/isexig/9/edit#source
(图像在您单击时将旋转,仅用于测试调整大小)
(The image will rotate when you click on it, its just for testing the re-sizing)
有关如何解决此问题的任何线索?
any clues how to fix this?
我发现需要将角度除以pi,但无法使bl起作用,并且锚点仍无法完美匹配=/
I found out that the angle needed to be divided by pi but i fail to get the bl to work and the anchors still do not match up perfectly =/
推荐答案
我发现该组已经旋转,包括角手柄,因此您根本不需要任何三角函数.
I found that the group is already rotated, including the corner handles, so you don't need any trigonometry at all:
http://jsbin.com/abejab/5/edit
switch (activeAnchor.name) {
case "tl":
case "br":
bl.x = tl.x;
bl.y = br.y;
tr.x = br.x;
tr.y = tl.y;
break;
case "tr":
case "bl":
br.x = tr.x;
br.y = bl.y;
tl.x = bl.x;
tl.y = tr.y;
break;
}
image.x = tl.x;
image.y = tl.y;
image.width = tr.x - tl.x;
image.height = bl.y - tl.y;
这篇关于画布图像编辑器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!