Question

我正在尝试使用聚合物网络组件在地图上显示不同的区域（区域）。

我当前的实现是使用放置在 environment 元素中的HTML5画布，该元素使用公共 .canvas 属性与 zone 元素子元素共享。问题是我没有在画布上绘制任何多边形。

我做错了什么？这是否是一个问题，因为画布的更新没有反映在UI中？有可能有更好的方法吗？

这里是我元素的当前输出：

environment map

这是环境元素：

<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../elements/nautes-zone.html">

<polymer-element name="nautes-environment-row" attributes="environment bgColor">
  <template>
    <style>
      :host {
        display: block;
        width: 100%;
        color: #444;
        background: {{bgColor}};
      }
      canvas{
        position: absolute;
        z-index: 99;
        height: {{environment.height}}px;
        width: {{environment.width}}px;
      }
    </style>
    <div layout vertical center>
      <h2>{{environment.name}}</h2>
      <div relative>
        <canvas id="environmentCanvas"></canvas>
        <img src="{{getImg(environment)}}" width="{{environment.width}}px" height="{{environment.height}}px"/>
        <template repeat="{{zone in environment.zones}}">
          <nautes-zone zone="{{zone}}" canvas="{{$.environmentCanvas}}"></nautes-zone>
        </template>
      </div>
    </div>
  </template>
  <script>
    Polymer("nautes-environment-row",{
      getImg: function(environment) {
        var src = 'https://XXXXX.XXXXXXXXX.it:9113/v3/resources/' + environment.backgroundImage;
        return src;
      }
    });
  </script>
</polymer-element>

这是区域元素：

<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="nautes-zone" attributes="zone canvas">
  <template>
    <style>
      :host {
        display: block;
      }
      #title{
        position: absolute;
        left: {{zone.shape.points[0].x}}px;
        top: {{zone.shape.points[0].y}}px;
        background-color: rgba(100, 100, 100, 0.7);
        color: #fff;
      }
    </style>
    <div id="title">
      {{zone.name}}
    </div>
  </template>
  <script>
    Polymer("nautes-zone",{
      canvasChanged: function() {
          var poly = this.zone.shape.points;
          console.log(poly);
          var canvas = this.canvas;
          console.log(canvas);
          var ctx = canvas.getContext('2d');
          ctx.fillStyle = "#f00";
          ctx.beginPath();
          ctx.moveTo(poly[0].x, poly[0].y);
          for( item=1 ; item < poly.length-1 ; item++ ){
              ctx.lineTo( poly[item].x , poly[item].y );
          }
          ctx.closePath();
          ctx.fill();
      }
    });
  </script>
</polymer-element>

*我愿意把代码放在 ready 而不是 canvasChanged 但是，我不知道为什么，输入画布是未定义的......

此处它遵循加载的环境JSON对象作为 environment 元素的输入：

 {
      "name":"Ground Floor",
      "width":1500,
      "height":1324,
      "renderer":"photo",
      "backgroundColor":{
         "red":255,
         "green":255,
         "blue":255,
         "alpha":255
      },
      "backgroundImage":"map2.png",
      "zones":[
         {
            "name":"Indoor",
            "description":"",
            "room":false,
            "shape":{
               "type":"polygon",
               "points":[
                  {
                     "x":20,
                     "y":240
                  },
                  {
                     "x":1460,
                     "y":240
                  },
                  {
                     "x":1460,
                     "y":730
                  },
                  {
                     "x":1195,
                     "y":730
                  },
                  {
                     "x":1195,
                     "y":1165
                  },
                  {
                     "x":300,
                     "y":1165
                  },
                  {
                     "x":300,
                     "y":905
                  },
                  {
                     "x":20,
                     "y":905
                  }
               ]
            },
            (... it should suffice :) ) 
   }

Answer 1

问题是不应该通过CSS设置画布宽度和高度。通过宽度和高度属性设置它们解决了我的问题。

混合HTML5 Canvas和Polymer Web Components

1 个答案: