将点展平到SVG折线聚合物中 [英] Flatten points into SVG polyline Polymer

问题描述

我具有以下数据结构:

'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属性.

I would like to flatten it to 5535,5535 5535,60000 60000,60000 60000,5535 to use as a polyline points attribute.

我在聚合物<template>中有以下内容

I have the following in 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，则多边形不会更新，因为尚未创建与多边形属性的绑定.

This works, the toSvgPoints returns the correct points but the bindings to the point values do not get set up automagically by Polymer. For example, if I modify this.points[0].x = 4219 the polygon doesn't update because the binding hasn't been created to the polygon attribute.

这是没有提供调用重绘的其他方法就无法解决的问题吗?理想情况下，我只想这样做:

Is this something that just can't be solved without providing some other method that invokes a redraw? Ideally I'd just want to do this:

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

将在points属性中标记出x和y值并设置绑定.

Which would stamp out the x and y values in the points attribute and set up the bindings.

推荐答案

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

PolymerExpressions only observes objects that are directly referenced in an expression, so in this case it observes points, but not the properties on the elements in the array. If you replace a point, the expression will update, but it won't if you modify a point.

有几种方法可以解决此问题.如果您知道要在哪里修改点，则可以在那里参考列表，您可以在列表上手动进行通知.我通常使用Polymer.Dart，但我认为observe-js中的notify()函数正是您要寻找的:

There are a few ways to deal with this. If you know where a point is being modified, at you have a reference to the list there, you can manually notify on the list. I usually work with Polymer.Dart, but I think that the notify() function in observe-js is what you're looking for: https://github.com/Polymer/observe-js/blob/master/src/observe.js#L1076

或者，不返回点的静态投影，而是让toSvgPoints侦听其所有依赖项:每个点的points，x和y，width和height.输入更改时，更新输出数组.这将导致一系列更新传播到您的视图.

Alternatively, instead of returning a static projection of the points, have toSvgPoints listen to all of its dependencies: points, x and y for each point, width and height. When an input changes, update the output array. This will cause a chain of updates that propagates to your view.

使用Polymer的observe-js库进行观察.它在没有它的平台上填充Object.observe(). https://github.com/Polymer/observe-js#objectobserver

Use Polymer's observe-js library to do observation. It polyfills Object.observe() on platforms that don't have it. https://github.com/Polymer/observe-js#objectobserver

这篇关于将点展平到SVG折线聚合物中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！