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以用作polyline points属性。

我在Polymer <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返回正确的点，但聚合物不会自动设置与点值的绑定。例如，如果我修改this.points[0].x = 4219，则多边形不会更新，因为尚未为多边形属性创建绑定。

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

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

这将标记x属性中的y和points值，并设置绑定。

Answer 1

PolymerExpressions仅观察在表达式中直接引用的对象，因此在这种情况下，它会观察points，但不会观察数组中元素的属性。如果替换一个点，表达式将更新，但如果修改一个点则不会。

有几种方法可以解决这个问题。如果您知道某个点的修改位置，那么当您在该列表中引用该列表时，您可以手动通知该列表。我通常使用Polymer.Dart，但我认为observe-js中的notify()函数是您正在寻找的：https://github.com/Polymer/observe-js/blob/master/src/observe.js#L1076

或者，不是返回点的静态投影，而是让toSvgPoints听取所有依赖关系：points，x和y每个点，{ {1}}和width。输入更改时，更新输出数组。这将导致一系列更新传播到您的视图。

使用Polymer的observe-js库进行观察。它会在没有它的平台上填充height。 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使用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会强制重绘。

将点平坦为SVG折线聚合物

3 个答案: