我正在開發一個白板應用程序,允許用戶使用箭頭繪製線(有些像帶有箭頭功能的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