拼合點到SVG折線聚合物

Question

我有以下的數據結構：

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

我想它弄平到5535,5535 5535,60000 60000,60000 60000,5535作爲polylinepoints屬性來使用。

我在聚合物以下<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，多邊形不會更新，因爲尚未爲多邊形屬性創建綁定。

如果不提供其他調用重繪的方法，就不能解決這個問題嗎？理想的情況是我只是想這樣做：

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

這將撲滅x和y值在points屬性和設置綁定。

Answer 1

PolymerExpressions僅觀察在表達式中直接引用的對象，因此在這種情況下，它觀察的是points，但不是數組中元素的屬性。如果替換一個點，表達式將會更新，但如果您修改了一個點，則表達式將不會更新。

有幾種方法可以解決這個問題。如果您知道點的修改位置，那麼您可以參考該列表，您可以在列表中手動通知。我通常Polymer.Dart工作，但我認爲notify()功能觀察，JS是你在找什麼：https://github.com/Polymer/observe-js/blob/master/src/observe.js#L1076

或者，而不是返回點的靜態投影，有toSvgPoints聽取各方其依賴關係：points,x和y對於每個點，width和height。當輸入改變時，更新輸出數組。這會導致一連串更新傳播到您的視圖。

使用Polymer的觀察-js庫進行觀察。它在沒有它的平臺上填充Object.observe()。 https://github.com/Polymer/observe-js#objectobserver

Answer 2

我不知道肯定，但我猜聚合物不會觀察數組內的個別屬性。你可以嘗試在該位置更換​​的項目：

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

或可選擇地創建一個新的數組並將其設置爲this.points？

Answer 3

那麼花了時間。不要使用polyline使用path：

<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)}}在d屬性開始強制重繪。