5

如何修改以下代码以使绘制的线为虚线，您可以在提供的 jfiddle 中看到它的实际效果。

<html>
    <style>
        #canvas
        {
        border-style:solid;
        border-width:1px;
        }
    </style>
    <div id="canvas"> 
        <p>Hover over me</p>        
    </div>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</html>

$(function() {

    animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
        $('#' + hoverDivName).hover(

        function() {
            var line = canvas.path(pathString).attr({
                stroke: colorNumber
            });
            var length = line.getTotalLength();

            $('path[fill*="none"]').animate({
                'to': 1
            }, {
                duration: 5000,
                step: function(pos, fx) {
                    var offset = length * fx.pos;
                    var subpath = line.getSubpath(0, offset);
                    canvas.clear();
                    canvas.path(subpath).attr({
                        stroke: colorNumber
                    });

                },
            });
        }, function() {
            $('path[fill*="none"]').stop(true, false).fadeOut();
        });
    };

    var canvas = Raphael('canvas', 200, 200);
    var pathString = "M10 10L10 200L100 200Z";

    animateLine(canvas, "canvas", "#000", pathString);

});

http://jsfiddle.net/eA8bj/

4

1 回答 1

6

使用“stroke-dasharray”属性：

http://jsfiddle.net/eA8bj/70/

https://developer.mozilla.org/en-US/docs/SVG/Attribute/stroke-dasharray

例如：

            canvas.path(subpath).attr({
                stroke: colorNumber,
                "stroke-dasharray":"--"
            });
于 2013-02-25T12:17:07.363 回答