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 重寫繪圖,呼叫剛才繪圖...