Lazy Line Painter-사각형이 올바르게 표시되지 않음

시나몬 빵

현재 Lazy Line Painter를 사용하여 이미지에 애니메이션을 적용하려고하는데 일부 이미지가 올바르게 표시되지 않습니다. 이 이미지에는 닫히지 않은 사각형이 5 개 있지만 어떤 이유로 모서리 중 하나의 위치가 잘못된 위치에 표시됩니다. 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
    }
}
}; 

여기에 이미지 설명 입력

어떤 도움이라도 대단히 감사하겠습니다.

크레오소트

어떤 이유로 직사각형의 모든 첫 번째 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/

그건 그렇고, 네가 아니라 다섯 점으로 직사각형을 그리시겠습니까? 이것이 당신의 코드가하는 일이기 때문입니다.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

DateTime 형식이 올바르게 표시되지 않음

분류에서Dev

Python 형식이 올바르게 표시되지 않음

분류에서Dev

Excel에서 시간이 올바르게 표시되지 않음

분류에서Dev

배경 이미지가 올바르게 표시되지 않음

분류에서Dev

그려진 사각형이있는 JPanel이 올바르게 표시되지 않음

분류에서Dev

SVG 아이콘이 올바르게 표시되지 않음

분류에서Dev

이온 탭 색상이 올바르게 표시되지 않음

분류에서Dev

CSS 레이아웃이 올바르게 표시되지 않음

분류에서Dev

geom_boxplot이 올바르게 표시되지 않음

분류에서Dev

Django Wagtail TableBlock이 올바르게 표시되지 않음

분류에서Dev

Packagist에서 Github 별이 올바르게 표시되지 않음

분류에서Dev

패널 제목이 올바르게 표시되지 않음

분류에서Dev

JavaScript 출력이 올바르게 표시되지 않음

분류에서Dev

목록 항목이 올바르게 표시되지 않음

분류에서Dev

laravel에서 URL이 올바르게 표시되지 않음

분류에서Dev

pydev의 주석이 올바르게 표시되지 않음

분류에서Dev

Android 배경색이 올바르게 표시되지 않음

분류에서Dev

MS Excel 플롯이 올바르게 표시되지 않음

분류에서Dev

Wordpress (Genesis) 위젯 열이 올바르게 표시되지 않음

분류에서Dev

관련 제품이 올바르게 표시되지 않음

분류에서Dev

테이블보기가 올바르게 표시되지 않음

분류에서Dev

Bootstrap Carousel이 올바르게 표시되지 않음

분류에서Dev

삼각형이 올바르게 렌더링되지 않음

분류에서Dev

settext의 백분율 형식이 올바르게 표시되지 않음

분류에서Dev

게시물의 댓글이 레일에 올바르게 표시되지 않음

분류에서Dev

HTML이 올바르게 설정되었지만 표시되지 않음

분류에서Dev

geom_line이 올바르게 표시되지 않는 이유는 무엇입니까?

분류에서Dev

ListView에 대해 이미지 배경이 올바르게 표시되지 않음

분류에서Dev

Google지도의 폴리 라인이 올바르게 표시되지 않음

Related 관련 기사

  1. 1

    DateTime 형식이 올바르게 표시되지 않음

  2. 2

    Python 형식이 올바르게 표시되지 않음

  3. 3

    Excel에서 시간이 올바르게 표시되지 않음

  4. 4

    배경 이미지가 올바르게 표시되지 않음

  5. 5

    그려진 사각형이있는 JPanel이 올바르게 표시되지 않음

  6. 6

    SVG 아이콘이 올바르게 표시되지 않음

  7. 7

    이온 탭 색상이 올바르게 표시되지 않음

  8. 8

    CSS 레이아웃이 올바르게 표시되지 않음

  9. 9

    geom_boxplot이 올바르게 표시되지 않음

  10. 10

    Django Wagtail TableBlock이 올바르게 표시되지 않음

  11. 11

    Packagist에서 Github 별이 올바르게 표시되지 않음

  12. 12

    패널 제목이 올바르게 표시되지 않음

  13. 13

    JavaScript 출력이 올바르게 표시되지 않음

  14. 14

    목록 항목이 올바르게 표시되지 않음

  15. 15

    laravel에서 URL이 올바르게 표시되지 않음

  16. 16

    pydev의 주석이 올바르게 표시되지 않음

  17. 17

    Android 배경색이 올바르게 표시되지 않음

  18. 18

    MS Excel 플롯이 올바르게 표시되지 않음

  19. 19

    Wordpress (Genesis) 위젯 열이 올바르게 표시되지 않음

  20. 20

    관련 제품이 올바르게 표시되지 않음

  21. 21

    테이블보기가 올바르게 표시되지 않음

  22. 22

    Bootstrap Carousel이 올바르게 표시되지 않음

  23. 23

    삼각형이 올바르게 렌더링되지 않음

  24. 24

    settext의 백분율 형식이 올바르게 표시되지 않음

  25. 25

    게시물의 댓글이 레일에 올바르게 표시되지 않음

  26. 26

    HTML이 올바르게 설정되었지만 표시되지 않음

  27. 27

    geom_line이 올바르게 표시되지 않는 이유는 무엇입니까?

  28. 28

    ListView에 대해 이미지 배경이 올바르게 표시되지 않음

  29. 29

    Google지도의 폴리 라인이 올바르게 표시되지 않음

뜨겁다태그

보관