将点展平为SVG多段线聚合物

我有以下数据结构：

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

我想将其展平为

553555553560000 60000 60000 5535

，以用作

多段线
点
属性

我在Polymer

这是可行的，
toSvgPoints
返回正确的点，但点值的绑定不会由Polymer自动设置。例如，如果修改此.points[0].x=4219，则多边形不会更新，因为尚未创建到多边形属性的绑定

如果不提供调用重画的其他方法，这是无法解决的吗？理想情况下，我只想这样做：

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



这将消除
点
属性中的
x
和
y
值，并设置绑定。
我不确定，但我猜Polymer不会观察数组中的单个属性。您可以尝试在该位置替换项目：

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

或者创建一个新数组并将其设置为this.points
 好吧，那花了好长时间。不要使用
多段线
使用
路径
：

<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）}
强制重新绘制。
PolymerExpressions只观察表达式中直接引用的对象，因此在本例中它观察
点，但不观察数组中元素的属性。如果替换点，表达式将更新，但如果修改点，则不会更新

有几种方法可以解决这个问题。如果您知道某个点正在修改的位置，那么在您有对该列表的引用时，您可以在列表上手动通知。我通常使用Polymer.Dart，但我认为observe js中的
notify（）
函数就是您想要的：

或者，不要返回点的静态投影，而是让
toSvgPoints
听它的所有依赖项：
点
，
x
和
y
对于每个点，
宽度
和
高度
。当输入更改时，更新输出数组。这将导致一系列更新传播到您的视图

使用Polymer的observe js库进行观察。它在没有它的平台上填充
对象。observe（）
 当通过过滤器时，它似乎没有观察到属性。这是正确的。PolymerExpressions只观察直接出现在表达式中的引用，而不是挂起这些对象的属性中的引用。我想您会发现，现在这样做的唯一原因是您直接引用表达式中的
点[0]。x
，而不是因为您使用
。如果您修改
点[1].x，它将不会更新。它似乎工作正常…我移动任何点它都工作正常。我和你想的一样，我不确定。我把它放进去，一切都开始起作用了。我需要从工作中跳出来，但下周要做一些测试。我不知道神奇聚合物在起什么作用。d属性是
M0 L0 L0 0
但所有点都正确更新。如何使
toSvgPoints
监听元素
onMutation
用于轻型DOM元素，但不起作用。我添加了一个链接来观察js
<polyline
    id="polygon",
    points="{{x,y for (points | polygonPoints)}}"
    ...
/>

<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"
/>