我正在开发一个白板应用程序,允许用户使用箭头绘制线(有些像带有箭头功能的Microsoft Word线)。我正在使用图形属性和lineTo()方法来绘制一条线。现在我必须在最后一点画一个角度箭头。我通过连接最后点的点来绘制箭头。由于360线可以穿过这一点,每条线可以有不同的箭头角度。请告诉我在最后一点计算这些点的方法。使用线斜率在线的终点绘制箭头
1
A
回答
2
我一直在做自己的东西,我需要它看起来不仅仅是一个三角形更好一点,并使用相对廉价的计算(如几个电话以尽可能的其他功能,如数学三角)。那就是:
public static function DrawArrow(ax:int, ay:int, bx:int, by:int):void
{
// a is beginning, b is the arrow tip.
var abx:int, aby:int, ab:int, cx:Number, cy:Number, dx:Number, dy:Number, ex:Number, ey:Number, fx:Number, fy:Number;
var size:Number = 8, ratio:Number = 2, fullness1:Number = 2, fullness2:Number = 3; // these can be adjusted as needed
abx = bx - ax;
aby = by - ay;
ab = Math.sqrt(abx * abx + aby * aby);
cx = bx - size * abx/ab;
cy = by - size * aby/ab;
dx = cx + (by - cy)/ratio;
dy = cy + (cx - bx)/ratio;
ex = cx - (by - cy)/ratio;
ey = cy - (cx - bx)/ratio;
fx = (fullness1 * cx + bx)/fullness2;
fy = (fullness1 * cy + by)/fullness2;
// draw lines and apply fill: a -> b -> d -> f -> e -> b
// replace "sprite" with the name of your sprite
sprite.graphics.clear();
sprite.graphics.beginFill(0xffffff);
sprite.graphics.lineStyle(1, 0xffffff);
sprite.graphics.moveTo(ax, ay);
sprite.graphics.lineTo(bx, by);
sprite.graphics.lineTo(dx, dy);
sprite.graphics.lineTo(fx, fy);
sprite.graphics.lineTo(ex, ey);
sprite.graphics.lineTo(bx, by);
sprite.graphics.endFill();
}
您还可以添加线条颜色和厚度参数列表,也许使它扩展雪碧的成员函数,和你有一个相当不错的,通用的功能:)你可以也玩一些数字来获得不同的形状和大小(丰满度的小变化导致疯狂的外观变化,所以小心:))。只要小心不要将比例或丰满度2设置为零!
0
如果您存储了该行的起点和终点,添加箭头应该相对简单。如果从起点坐标中减去终点坐标,则会得到箭头方向矢量(我们称之为D)。使用此矢量,可以确定两点之间的线上的任何点。
因此,要绘制箭头,您需要确定一个点(P1),该点与终点具有特定距离(d1),确定一条穿过它的直线,并垂直于D.最后得到与先前确定的点具有距离(d2)的点(P2)。然后,您可以确定与P2对称的点,相对于D.
因此,您将有一个箭头头d1的长度和一个2 * d2的基数。
一些额外的信息,在这里的几个代码示例:http://forums.devx.com/archive/index.php/t-74981.html
相关问题
- 1. 绘制曲线SVG箭头线的div
- 2. 使用Javascript线绘制箭头至
- 3. 用Java中的箭头绘制线条
- 4. 用CGContext绘制三角形/箭头线
- 5. 在线算法绘制箭头
- 6. 如何使用箭头键绘制线条(线段)?
- 7. 绘制带箭头的曲线线在机器人画布
- 8. 将变量绘制为点之间的直线斜率
- 9. 使用谷歌地图在多段线中绘制箭头V2
- 10. 如何使用Highcharts在线图上绘制箭头?
- 11. 如何使用d3.js绘制带箭头的线
- 12. 需要帮助绘制使用箭头键的线段
- 13. 如何在Pandas和Seaborn散点图中使用斜率绘制直线?
- 14. 使用仿射变换在条形图上绘制曲线线条箭头
- 15. 如何改善使用CoreGraphics绘制箭头线?
- 16. JavaFX线/箭头箭头
- 17. 带箭头的Android绘图线
- 18. 使用Java中的keylistener在GUI中使用箭头键绘制线条
- 19. 绘制斜线与Java
- 20. 使用箭头键绘制线条并在重新绘制每个新线条时添加
- 21. 用matplotlib中的箭头绘制线条图
- 22. 用轴线外的文字绘制箭头
- 23. 如何绘制带箭头线的在端
- 24. 在Javascript中绘制一条带箭头的直线
- 25. 在VB6中的线对象上绘制一个箭头
- 26. 如何用两条斜线绘制一条线使用python
- 27. 在Matlab上的两个地理空间点之间的线上绘制箭头
- 28. 用单词绘制箭头曲线(Objective-c cocos2D)
- 29. 在HTML5画布二次曲线上绘制箭头
- 30. Jfreechart:在甘特图中绘制线条箭头
就像romi说的,但与代码。获取箭头的目录'var dir:Point = new Point(end.x - start.x,end.y - start.y);' – divillysausages 2012-01-09 23:40:19
right normal:'var normalR:Point = new Point(-dir.y ,'dir.x';' – divillysausages 2012-01-09 23:40:47
left normal:'var normalL:Point = new Point(dir.y,-dir.x);' – divillysausages 2012-01-09 23:41:11