Question

我目前正在尝试使用Lazy Line Painter为图像设置动画，但是，某些图像无法正确显示。我在这张图片上有五个未关闭的矩形，但由于某种原因，其中一个角的位置显示在错误的位置。 LLP生成的代码如下：

var pathObj = {
"floor-map": {
    "strokepath": [
        {
            "path": "M620.417,116.417l21.042-36.875  c0,0,29.188,16.313,52.188-2.854S712.667,37,712.667,37H755c0,0,2,48.833,51.5,48.833C851.5,83.333,852,37,852,37h41  c0,0-1.167,22.917,24.167,41.917l-20.833,35.708c0,0-21.5-13.063-48,0.771c-23,12.833-23.5,42.604-23.5,42.604H784  c0,0-1.5-48.75-48.167-48.75c-46.667,0-49.5,49.75-49.5,49.75H645C645,159,649.167,132.25,620.417,116.417z",
            "duration": 800
        },
        {
            "path": "M718.583,250.5l35.708-20.75  c0,0,13.521,24.708,44.021,23.042c30.5-1.667,39.51-24.479,39.51-24.479l36.172,20.01c0,0-14.164,27.672,1.503,50.839  C891.164,322.328,916,321.333,916,321.333V362c0,0-28.417,2.5-40.083,25.833L839.708,367.5c0,0,18.729-39-12.604-62.5  c-31.333-23.5-61.302-1.833-71.969,15.167l-35.318-20.833C719.818,299.333,733,278.167,718.583,250.5z",
            "duration": 800
        },
        {
            "path": "M761.75,419.917c0,0,22.875,13.292,47.542-0.042  l21.021,34.979c0,0-33.99,23.156-19.656,61.656c16.667,36.833,60.005,30.328,68.505,22.161l21.336,35.997  c0,0-22.499,10.665-23.499,43.665c1.813,29,19.641,39.52,22.968,41.238c0.344,0.178,0.533,0.261,0.533,0.261L880.333,696  c0,0-26.667-15-50.667,1.5s-21.5,41.5-21.5,41.5H766c0,0,3.667-26.25-23.667-41.917l20-36.458c0,0,61.333,18.938,70.5-29.229  c9.167-48.167-29-61.365-44.167-61.698c-15.167-0.333-26.833,7.318-26.833,7.318l-19.5-35.674c0,0,22-14.171,23.167-43.671  c1.167-29.5-24.5-41.335-24.5-41.335L761.75,419.917z",
            "duration": 1300
        },
        {
            "path": "M809.167,789.75c0,0,21.25,13.375,47.583,0.042  l21.458,35.688c0,0-25.042,14.521-23.708,43.521H813c0,0,0.667-30.25-24.833-42.75L809.167,789.75z",
            "duration": 600
        },
        {
            "path": "M 558,10 L 328,106 328,37 560,37 560,106   559,106 ",
            "duration": 600
        },
        {
            "path": "M 269,10 L 39,106 39,37 271,37 271,106   270,106 ",
            "duration": 600
        },
        {
            "path": "M 269,24 L 39,243 39,174 271,174 271,243   270,243 ",
            "duration": 600
        },
        {
            "path": "M 269,38 L 39,380 39,311 271,311 271,380   270,380 ",
            "duration": 600
        },
        {
            "path": "M 269,51 L 39,518 39,449 271,449 271,518   270,518 ",
            "duration": 600
        }
    ],
    "dimensions": {
        "width": 960,
        "height": 892
    }
}
};

enter image description here

非常感谢任何帮助

Answer 1

出于某种原因，你只是忘记了矩形的每个第一个Y坐标的最后一个符号。

var pathObj = {
    "floor-map": {
        "strokepath": [
        {
            "path": "M 558,106 L 328,106 328,37 560,37 560,106 559,106 ",
            "duration": 600
        },
        {
            "path": "M 269,106 L 39,106 39,37 271,37 271,106 270,106 ",
            "duration": 600
        },
        {
            "path": "M 269,243 L 39,243 39,174 271,174 271,243 270,243 ",
            "duration": 600
        },
        {
            "path": "M 269,380 L 39,380 39,311 271,311 271,380 270,380 ",
            "duration": 600
        },
        {
            "path": "M 269,518 L 39,518 39,449 271,449 271,518 270,518 ",
            "duration": 600
        }
        ],
        "dimensions": {
            "width": 960,
            "height": 892
        }
    }
}; 

$(document).ready(function(){ 
    $('#floor-map').lazylinepainter({
        "svgData": pathObj,
        "strokeWidth": 1.5,
        "strokeColor": "#660"
    }).lazylinepainter('paint');
});

http://jsfiddle.net/eZedP/

顺便问一下，你确定要画五个点而不是四个吗？这是你的代码所做的。

Lazy Line Painter - 矩形无法正确显示

1 个答案: