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 に答える