canvas 中图形经过旋转后判断当前点击位置是否还在图形上的问题? - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
qq309187341
V2EX    Vue.js

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

  •  1
     
  •   qq309187341 2022-11-01 11:2953 +08:00 2449 次点击
    这是一个创建于 1138 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    15 条回复    2022-11-01 22:25:59 +08:00
    Mithril
        1
    Mithril  
       2022-11-01 11:34:23 +08:00
    学学线性代数?
    看描述拿图像的矩阵算一下就行了。
    mtdhllf
        2
    mtdhllf  
       2022-11-01 11:43:25 +08:00
    不用自己死磕,跟 canvas 搭配的还有矩阵吧,你在矩阵上进行变换操作就行了。虽然我不是做 web 的,但这玩意应该相通
    wangxiaoaer
        3
    wangxiaoaer  
       2022-11-01 11:47:33 +08:00
    jadehare
        4
    jadehare  
       2022-11-01 12:13:04 +08:00
    啊这用叉乘就能算出来了吧,二维的直接四个边叉乘点击的位置都是相同的正负值就行
    gydi
        5
    gydi  
       2022-11-01 12:20:23 +08:00 via Android
    可以看看 konva
    nashaofu
        6
    nashaofu  
       2022-11-01 12:37:20 +08:00 via iPhone
    把点经过相同的旋转,然后再判断?就是不知道不规则图形如何判断
    oldshensheep
        7
    oldshensheep  
       2022-11-01 12:42:33 +08:00
    简单说一下具体解决方案,
    图片的坐标 K1,K2,K3 。注:形式为(x,y,1)
    变换矩阵……一个 3x3 的变换矩阵(仿射变换),M

    然后对每一个图片坐标 K ,运算 K*M 得到一个矩阵,就是图片坐标变换后的结果。
    然后鼠标点击的时候判断点在不在这个多边形内就行了。
    判断点是否在多边形内网上找一个算法吧……,如果是简单的矩形那到比较简单……
    oldshensheep
        8
    oldshensheep  
       2022-11-01 12:45:10 +08:00
    @oldshensheep #7 应该是 M*K 写错了
    andyskaura
        9
    andyskaura  
       2022-11-01 13:30:14 +08:00
    找个游戏库来做吧,cocos laya 白鹭
    churchill
        10
    churchill  
       2022-11-01 14:14:39 +08:00   1
    qq309187341
        11
    qq309187341  
    OP
       2022-11-01 15:33:09 +08:00
    @churchill 老哥你这个可行,我消化一下。
    yechentide
        12
    yechentide  
       2022-11-01 17:22:57 +08:00 via iPhone
    高数已经忘光了,看不懂楼上大佬的讲解 TAT
    arnosolo
        13
    arnosolo  
       2022-11-01 18:23:13 +08:00
    请问你是不是忘记 restore 了?
    ctx.save()
    ...
    ctx.restore()
    dumbass
        14
    dumbass  
       2022-11-01 22:18:38 +08:00 via iPhone
    @gydi 推荐这个,之前做的一个项目就是用 konvajs 实现了一些功能。自己手写 canvas 会累死
    yuuko
        15
    yuuko  
       2022-11-01 22:25:59 +08:00
    获取点击的位置坐标,把这个坐标通过和矩形旋转的相反方向旋转,如果这个点落在未旋转的矩形内,那么它就在旋转后的矩形内。
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     2737 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 29ms UTC 09:31 PVG 17:31 LAX 01:31 JFK 04:31
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86