技术CTO-关注编程入门知识,提供编程入门教程

您的位置: 首页 > 前端开发 > html/html5 > 正文

html canvas画箭头

来源: 技术CTO 阅读:

\

从一个点到另一个点的箭头

1.用程序画出图中箭头
2.给定一个点P(x,y),用程序判断P点是否在箭头区域内

注:图中箭头箭身部分用贝赛尔曲线画出
(
坐标:
始点:(x : 100,y : 100)
控点:(x : 200,y : 100)
终点:(x : 500,y : 300)
),
箭头的头部为四条线段路径包起来的区域


同一个问题:
http://bbs.csdn.net/topics/390547931

看看这些能否满足你 

http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html
http://deepliquid.com/blog/archives/98
贝赛尔曲线相关算法我不知道,不过用一条直线把这个箭头分成两个三角形,就是图中最左边那个点横向一个直线,然后根据纵坐标判断和哪个三角形相关,然后判断是否在三角形内,这个算法网上大大的有

鄙人浅见,请见谅
引用 1 楼 net_lover 的回复:
看看这些能否满足你 

http://www.dbp-consulting.com/tutorials/canvas/CanvasArrow.html
http://deepliquid.com/blog/archives/98


谢谢你的方案
这个我已经看过了  我要画的箭头箭身是不规则的 
引用 2 楼 shao_winds 的回复:
贝赛尔曲线相关算法我不知道,不过用一条直线把这个箭头分成两个三角形,就是图中最左边那个点横向一个直线,然后根据纵坐标判断和哪个三角形相关,然后判断是否在三角形内,这个算法网上大大的有

鄙人浅见,请见谅


谢谢你的方案
我是根据canvas画出来的贝赛尔曲线,是个不规则的曲线,上面只是个例子,可能还有其它形状  主要是取不到曲线的坐标集合 
引用 4 楼 jelly870115 的回复:
Quote: 引用 2 楼 shao_winds 的回复:

贝赛尔曲线相关算法我不知道,不过用一条直线把这个箭头分成两个三角形,就是图中最左边那个点横向一个直线,然后根据纵坐标判断和哪个三角形相关,然后判断是否在三角形内,这个算法网上大大的有

鄙人浅见,请见谅


谢谢你的方案
我是根据canvas画出来的贝赛尔曲线,是个不规则的曲线,上面只是个例子,可能还有其它形状  主要是取不到曲线的坐标集合 

话说?贝塞尔曲线是两个控制点那个?还是二次曲线?

^_^ 如果您热爱技术、热爱编程,想与更多的朋友一起交流学习,欢迎加入本站官方QQ群:345733473 ^_^