Raphael(拉斐爾)畫箭頭的一些用法

2021-07-24 22:55:28 字數 1072 閱讀 8876

raphael,很多人都喜歡用這個,因為它具有更好的相容性。本人也喜歡用這個外掛程式進行圖形的繪製。下面來看乙個例項:

首先畫出兩個箭頭

這個時候在ie瀏覽器下,沒有任何問題。那麼我們用谷歌開啟一下同樣的頁面。

看出問題了嗎?由於綠色的箭頭是遲於紅色箭頭例項的,所以箭頭會被後者的顏色所覆蓋,造成這種難看的樣式。

那麼應該如何解決的呢?​先來看一下如何例項這個箭頭,相信很多人還不了解。

​那麼箭頭的問題解決了,如何來解決顏色的覆蓋問題呢?

通過除錯,我了解到了乙個svg的執行原理​,raphael為這個箭頭的marker-end屬性設定了乙個引用位址url(#raphael-marker-endclassic55),這個是classic-wide-long屬性自己生成的,而這個「raphael-marker-endclassic55」就存在於svg畫布中。

於是我在body標籤中強制插入了兩個箭頭物件。並且為它們都設定了顏色。

​那麼剩下的就是如何改變raphael為我設定的箭頭位址"raphael-marker-endclassic55"了。輾轉了半天,終於找到了方法。

​為兩條線強制設定marker-end的值。將url重新指定。最終得到正確的效果。

附頁面**:

$(function () );

var line2 = *****.path("m500,200 l 600,400").attr();

if (raphael.svg)

});

SVG 使用marker畫箭頭(一)

一 使用marker畫箭頭 1.定義乙個箭頭的marker引用 defs marker id markerarrow markerwidth 13 markerheight 13 refx 2 refy 6 orient auto path d m2,2 l2,11 l10,6 l2,2 style...

SVG 使用marker畫箭頭(一)

一 使用marker畫箭頭 1.定義乙個箭頭的marker引用 defs marker id markerarrow markerwidth 13 markerheight 13 refx 2 refy 6 orient auto path d m2,2 l2,11 l10,6 l2,2 style...

iOS(CoreGraphics)畫帶箭頭的框

自己畫帶箭頭的框,需要匯入coregraphics.framwork庫 新建乙個整合uiview 的類,對uiview中的drawrect cgrect rect方法重寫如下。繪圖操作 繪製帶箭頭的矩形 void drawarrowrectangle cgrect frame 重寫繪圖,呼叫剛才繪圖...