Canvas 混合HTML5画布和聚合物网络组件
我正在尝试使用聚合物网络组件在地图(环境)上显示不同的区域(分区) 我当前的实现是使用一个HTML5画布,该画布放置在使用public.canvas属性和zone元素子元素共享的环境元素中。 问题是我没有在画布上绘制任何多边形 我做错了什么? 这是不是因为画布的更新没有反映在UI中? 也许有更好的办法 在这里,它遵循my元素的当前输出: 这是环境元素:Canvas 混合HTML5画布和聚合物网络组件,canvas,polymer,Canvas,Polymer,我正在尝试使用聚合物网络组件在地图(环境)上显示不同的区域(分区) 我当前的实现是使用一个HTML5画布,该画布放置在使用public.canvas属性和zone元素子元素共享的环境元素中。 问题是我没有在画布上绘制任何多边形 我做错了什么? 这是不是因为画布的更新没有反映在UI中? 也许有更好的办法 在这里,它遵循my元素的当前输出: 这是环境元素: 问题是画布的宽度和高度不应该通过CSS设置。 通过宽度和高度属性设置它们解决了我的问题 <link rel="import" href=
问题是画布的宽度和高度不应该通过CSS设置。 通过宽度和高度属性设置它们解决了我的问题
<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>
{
"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 :) )
}