canvas 中图形经过旋转后判断当前点击位置是否还在图形上的问题？
qq309187341 · 2022-11-01 11:29:53 +08:00 · 1988 次点击这是一个创建于 734 天前的主题，其中的信息可能已经有所发展或是发生改变。
如题，最近在做一个图形编辑器，但是遇上了一些数学上的问题。 需求是在 canvas 中实现一个编辑器，然后可以添加很多图片。选中图片后可以进行缩放，旋转，移动。缩放和移动的操作都很简单。但是旋转的操作出现了问题。在旋转之后，因为图片在 canvas 中的位置发生变化了。如何判断当前点击位置坐标和图片所在 canvas 中的位置关系。因为图片四周存在删除，缩放，旋转等按钮。需要毕竟精确的计算出来。 使用了蛮多方法，但是还是没有解决，查看了网上很多资料，各种正弦余弦函数，极坐标等等，可能太笨了还是没能处理好。然后也尝试了 fabric.js 确实旋转相关已经包含在内了。但是还是存在一些问题，比如物体周围的控制角无法自定义修改成自己想要的图标等等。而且还有其他的小问题。 也拔下 https://juejin.cn/post/6844904083397033998 这位大佬的 demo 。但是实际还是存在问题，他的旋转后位置还是计算不准确的。 求各位大佬推荐有没有实现基础的旋转缩放移动的 demo ，或者符合我需求的 js 库。
 |
1
Mithril 2022-11-01 11:34:23 +08:00
学学线性代数？
看描述拿图像的矩阵算一下就行了。 |
 |
2
mtdhllf 2022-11-01 11:43:25 +08:00
不用自己死磕，跟 canvas 搭配的还有矩阵吧，你在矩阵上进行变换操作就行了。虽然我不是做 web 的，但这玩意应该相通
|
 |
3
wangxiaoaer 2022-11-01 11:47:33 +08:00
|
 |
4
jadehare 2022-11-01 12:13:04 +08:00
啊这用叉乘就能算出来了吧，二维的直接四个边叉乘点击的位置都是相同的正负值就行
|
 |
5
gydi 2022-11-01 12:20:23 +08:00 via Android
可以看看 konva
|
 |
6
nashaofu 2022-11-01 12:37:20 +08:00 via iPhone
把点经过相同的旋转，然后再判断？就是不知道不规则图形如何判断
|
 |
7
oldshensheep 2022-11-01 12:42:33 +08:00
简单说一下具体解决方案，
图片的坐标 K1,K2,K3 。注：形式为(x,y,1) 变换矩阵……一个 3x3 的变换矩阵（仿射变换），M 然后对每一个图片坐标 K ，运算 K*M 得到一个矩阵，就是图片坐标变换后的结果。 然后鼠标点击的时候判断点在不在这个多边形内就行了。 判断点是否在多边形内网上找一个算法吧……，如果是简单的矩形那到比较简单…… |
|
8
oldshensheep 2022-11-01 12:45:10 +08:00
@oldshensheep #7 应该是 M*K 写错了
|
 |
9
andyskaura 2022-11-01 13:30:14 +08:00
找个游戏库来做吧，cocos laya 白鹭
|
 |
10
churchill 2022-11-01 14:14:39 +08:00  1
|
 |
11
qq309187341 OP @churchill 老哥你这个可行，我消化一下。
|
 |
12
yechentide 2022-11-01 17:22:57 +08:00 via iPhone
高数已经忘光了，看不懂楼上大佬的讲解 TAT
|
 |
13
arnosolo 2022-11-01 18:23:13 +08:00
请问你是不是忘记 restore 了?
ctx.save() ... ctx.restore() |
 |
14
bojackhorseman 2022-11-01 22:18:38 +08:00 via iPhone
@gydi 推荐这个，之前做的一个项目就是用 konvajs 实现了一些功能。自己手写 canvas 会累死
|
 |
15
yuuko 2022-11-01 22:25:59 +08:00
获取点击的位置坐标，把这个坐标通过和矩形旋转的相反方向旋转，如果这个点落在未旋转的矩形内，那么它就在旋转后的矩形内。
|
Select Language