在傳統白板和掛圖上，關鍵詞往往會畫個圓圈線條標記。在web專案上，我們可以通過jQuery的外掛Traceit.js標記，就像在白板上畫出來的圓圈一樣標記被選擇的HTML元素並且毫不費力。"traceit.js"特別是在標記教程報告的重要部分非常容易並且效果非常好。 整合並使用Traceit.js

使用Traceit.js，需要jQuery和JavaScript庫。“Raphael”需要整合“Raphael”的SVG繪製外掛使用。另外，還可以結合包含了類似於”Raphael“外掛的JavaScript檔案。 一旦檔案被整合，所有的內容都可以像這樣用圓圈起來

<p><span id="schlagwort">Schlagworte</span> sollten immer auffallen.</p> 在這個列子中，元素的內容都被圓圈起來了。要做到這一點，只需要使用"traceit.js"外掛呼叫其內容分配的ID。

$("#schlagwort").trace(); 預設包圍圈

這個外掛會確保內容圈在它的尺寸內，traceit.js不僅可以圈文字還可以圈圖片。然而，圈記很多行文字的話會有點問題，除此之外，這個外掛在計算元素的尺寸方面真的做得非常好。

修改圓圈的外觀

元素默會被用一個綠色的細小的線條圈起來，但是我們可以通過編輯”traceOpt“方法來修改。並不只是顏色和線條寬度我們還可以修改透明度。

$("#schlagwort").trace({ traceOpt { "stroke": "red"; "stroke-width": 5, "stroke-opacity": 0.5, "fill": "yellow", "fill-opacity": 0.25, "z-index": -1, "stroke-linecap": "round" } }); 在上述例項中，繪製了一個5畫素，紅色線條，透明度為50%的圓圈。圓圈裡面填充的是黃色的背景，25%的透明度。線條的位置可以通過”z-index“定義。SVG格式支援所有的CSS特性，比如可以通過”stroke-linecap“新增圓圈的起點和終點,這使得圈圈看起來更像是手畫上去的。 個性包圍圈

預設線條會覆蓋選擇的元素，在我們的例子中，線條在元素的下面。實際上，手畫的一般都在內容上面。但在某些情況下，線條在下面會是內容更容易被閱讀更有意義，儘管有可能會改變它的內容。

”traceit.js“是模仿手畫的圓圈，它的起點和終點應該是不對稱的。選項”traceCanvasPadding“允許使用者定義它們之間的距離，值為0會建立一個完美的不對稱的橢圓。通過”redrawSpeed“，圓圈就會一步步重新調整。在實際演示中，在手繪向量包圍圈時起點和終點的距離通常會隨著快速的繪製而改變，所以”traceCanvasPadding“和”redrawSpeed“應該一起變化。

SVG元素畫包圍圈

在前面提到的，包圍圈是使用”Raphaël“建立的一個SVG元素，要做到這一點，需要把它放到一個

被包圍的地方使用的是

keyword_wrap svg {

overflow: visible !important; } 這樣，繪製的橢圓肯定會完全顯示。

定義包圍圈的表現方式

包圍圈可以通過點選隱藏，除此之外，線條也可以使用”trigger()“方法隱藏：

$("#schlagwort").trigger("hide.trace"); 此外，”traceit.js“還提供了三種回撥，當動畫完成的時候使它的執行狀態為(”onEndTrace“)，當被點選的時候("onClick")，或者當它是隱藏的時候("onHide")，

$("#schlagwort").trace({ onEndTrace: function() { alert("Circle completed."); } }); 在這個例子中，使用者在包圍圈完成的時候會被提醒

結論

”traceit.js“可以被整合，並且快速簡單的使用。該外掛提供了一種簡便的和視覺吸引力的方式轉向關注一個特定的元素。

原文連結：http://www.gbtags.com/gb/share/9413.htm