canvas 中图形经过旋转后判断当前点击位置是否还在图形上的问题？

[qq309187341]

如题，最近在做一个图形编辑器，但是遇上了一些数学上的问题。 需求是在 canvas 中实现一个编辑器，然后可以添加很多图片。选中图片后可以进行缩放，旋转，移动。缩放和移动的操作都很简单。但是旋转的操作出现了问题。在旋转之后，因为图片在 canvas 中的位置发生变化了。如何判断当前点击位置坐标和图片所在 canvas 中的位置关系。因为图片四周存在删除，缩放，旋转等按钮。需要毕竟精确的计算出来。 使用了蛮多方法，但是还是没有解决，查看了网上很多资料，各种正弦余弦函数，极坐标等等，可能太笨了还是没能处理好。然后也尝试了 fabric.js 确实旋转相关已经包含在内了。但是还是存在一些问题，比如物体周围的控制角无法自定义修改成自己想要的图标等等。而且还有其他的小问题。 也拔下 https://juejin.cn/post/6844904083397033998 这位大佬的 demo 。但是实际还是存在问题，他的旋转后位置还是计算不准确的。 求各位大佬推荐有没有实现基础的旋转缩放移动的 demo ，或者符合我需求的 js 库。

[Mithril]

学学线性代数？
看描述拿图像的矩阵算一下就行了。

[mtdhllf]

不用自己死磕，跟 canvas 搭配的还有矩阵吧，你在矩阵上进行变换操作就行了。虽然我不是做 web 的，但这玩意应该相通

[wangxiaoaer]

https://study.com/skill/learn/how-to-find-the-coordinates-of-a-polygon-after-a-rotation-explanation.html

随手搜了下，看看能不能用。

[jadehare]

啊这用叉乘就能算出来了吧，二维的直接四个边叉乘点击的位置都是相同的正负值就行

[gydi]

可以看看 konva

[nashaofu]

把点经过相同的旋转，然后再判断？就是不知道不规则图形如何判断

[oldshensheep]

简单说一下具体解决方案，
图片的坐标 K1,K2,K3 。注：形式为(x,y,1)
变换矩阵……一个 3x3 的变换矩阵（仿射变换），M

然后对每一个图片坐标 K ，运算 K*M 得到一个矩阵，就是图片坐标变换后的结果。
然后鼠标点击的时候判断点在不在这个多边形内就行了。
判断点是否在多边形内网上找一个算法吧……，如果是简单的矩形那到比较简单……

[oldshensheep]

@oldshensheep #7 应该是 M*K 写错了

[andyskaura]

找个游戏库来做吧，cocos laya 白鹭

[churchill]

试下
https://codesandbox.io/s/loving-cache-9194iv

[qq309187341]

@churchill 老哥你这个可行，我消化一下。

[yechentide]

高数已经忘光了，看不懂楼上大佬的讲解 TAT

[arnosolo]

请问你是不是忘记 restore 了?
ctx.save()
...
ctx.restore()

[bojackhorseman]

@gydi 推荐这个，之前做的一个项目就是用 konvajs 实现了一些功能。自己手写 canvas 会累死

[yuuko]

获取点击的位置坐标，把这个坐标通过和矩形旋转的相反方向旋转，如果这个点落在未旋转的矩形内，那么它就在旋转后的矩形内。