转载

教你使用Traceit.js和jQuery制作画圈的标记

在传统白板和挂图上，关键词往往会画个圆圈线条标记。在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元素，要做到这一点，需要把它放到一个

容器中，

容器的id要包含被圈住得元素的id——例子中的”keywords“—后面跟着描述特征的字符串”_wrap“。容器的名字可以通过”traceDivPref“修改。这样可以知道生成的ID是否在其他地方已经使用，这非常有用。

被包围的地方使用的是

容器的样式，通过容器的ID，包围圈的位置和外观可以通过CSS单独改变。SVG元素通过内联CSS绘制，这样突出的内容可以被隐藏(overflow: hidden)。有时，会导致该行的末尾不被完全显出，因为它超出了绘图区域。我们可以通过样式表去覆盖