SVG 폴리 라인에 폴리머

Question

을 포인트를 평평하게 나는 다음과 같은 데이터 구조를 가지고 : 나는 polylinepoints 속성으로 사용하는 5535,5535 5535,60000 60000,60000 60000,5535에 평평하게하고 싶은

'points': [ 
    { 
    'x': 5535, 
    'y': 5535 
    }, 
    { 
    'x': 5535, 
    'y': 60000 
    }, 
    { 
    'x': 60000, 
    'y': 60000 
    }, 
    { 
    'x': 60000, 
    'y': 5535 
    } 
]; 

합니다.

나는 <template>

<polyline 
    id="polygon", 
    points="{{points | polygonPoints | toSvgPoints(width, height)}}" 
    stroke="rgba({{colour.r}}, {{colour.g}}, {{colour.b}}, {{opacity}})" 
    fill="rgba({{colour.r}}, {{colour.g}}, {{colour.b}}, {{opacity * 0.6}})" 
    stroke-width="{{lineWidth}}" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
/> 

polygonPoints 및 toSvgPoints 필터 그래서 같이 폴리머에 다음과 같습니다

/** 
* Retrieves the polygon points for this object. 
* @param point optionally provide a list of normalized points 
* @returns the polygon points or all points if a line 
*/ 
polygonPoints: function(points) { 
    var array = points.slice(0); 
    points = points || this.points; 
    array.push(points[0]) 
    return array; 
}, 

/** 
* Retrieves the polygon points for this object. 
* @param point optionally provide a list of normalized points 
* @returns the polygon points or all points if a line 
*/ 
toSvgPoints: function(points, width, height) { 
    var i, string = ''; 
    points = points || this.points; 
    for (i = 0; i < points.length; ++i) { 
    string += this.normalizedToActual(points[i].x, width); 
    string += ','; 
    string += this.normalizedToActual(points[i].y, height); 
    string += ' '; 
    } 
    return string; 
}, 

이 작품의 toSvgPoints 반환 정확한 포인트를하지만 포인트 값으로 바인딩 Polymer가 자동으로 설정하지 마십시오. 예를 들어 this.points[0].x = 4219을 수정하면 바인딩이 다각형 속성에 만들어지지 않았기 때문에 다각형이 업데이트되지 않습니다.

다시 그리기를 호출하는 다른 방법을 제공하지 않으면이 문제를 해결할 수 없습니까? 이상적으로는이 작업을 수행 할 것 다음 points 속성에 x 및 y 값을 근절하고 바인딩을 설정합니다

<polyline 
    id="polygon", 
    points="{{x,y for (points | polygonPoints)}}" 
    ... 
/> 

합니다.

Answer 1

PolymerExpressions는 표현식에서 직접 참조되는 객체 만 관찰하므로이 경우 배열에있는 요소의 속성은 제외하고 points을 관찰합니다. 점을 바꾸면 표현식이 업데이트되지만 점을 수정하면 표현식이 업데이트되지 않습니다.

이 문제를 처리 할 수있는 몇 가지 방법이 있습니다. 포인트가 수정되는 위치를 알고있는 경우 해당 포인트에 대한 참조가있을 때 목록에서 수동으로 통지 할 수 있습니다. 나는 보통 Polymer.Dart와 함께 작동,하지만 난 notify() 기능에서 관찰-JS는 당신이 찾고있는 무엇이라고 생각 : 대신 포인트의 정적 투사를 반환하는, 또는 https://github.com/Polymer/observe-js/blob/master/src/observe.js#L1076

toSvgPoints을 모두 듣고 그것의 의존성 : width 및 height 각 points, x 및 y. 입력이 변경되면 출력 배열을 업데이트하십시오. 이로 인해 사용자의보기로 전파되는 일련의 업데이트가 발생합니다.

Polymer의 observe-js 라이브러리를 사용하여 관찰합니다.이 플랫폼에는없는 폴리곤에 Object.observe()이 있습니다. https://github.com/Polymer/observe-js#objectobserver

Answer 2

확실하지는 않지만 Polymer는 배열 내부의 개별 특성을 관찰하지 않습니다.

this.points[0] = {x:4219,y:this.points[0].y}

또는 대안으로 새로운 배열을 생성하고 this.points하도록 설정 : 당신은 그 위치에있는 항목을 대체 할 수 있겠지?

Answer 3

음, 나이가 들었습니다. polyline를 사용하여 A path 사용 안 함 : d 속성의 시작

<path 
    id="zone" 
    on-down="{{dragStart}}" 
    on-up="{{dragEnd}}" 
    d="M {{points[0].x| max(width)}} {{points[0].y | max(height)}} {{points | polygonPoints | toSvgPoints(width, height)}}" 
    fill="rgba({{colour.r}}, {{colour.g}}, {{colour.b}}, {{(selected ? 0.8 : 0.6) * 0.6}})" 
    stroke="rgba({{colour.r}}, {{colour.g}}, {{colour.b}}, {{(selected ? 0.8 : 0.6)}})" 
    stroke-linecap="round" 
    stroke-linejoin="round" 
/> 

M {{points[0].x| max(width)}} {{points[0].y | max(height)}}하면 다시 그리기를 강제로.