0
我想根据fabric.canvas.object中的属性动态地生成div。聚合物中的动态html代码
以下是摘自我的代码。
class Polymer2FabricEdit extends Polymer.Element {
static get is() { return 'polymer-2-fabric-edit' }
static get config() {
return {
properties: {
canvas: {
type: Object,
value: null
},
ctx: {
type: Object,
value: null
},
canvasWidth: {
type: Number,
value: 300
},
canvasHeight: {
type: Number,
value: 300
},
topProperty: {
type: Number,
value: 0,
notify: true
},
observers: [
]
}
}
constructor() {
super();
console.log('created');
}
connectedCallback() {
super.connectedCallback();
console.log('attached');
}
ready() {
super.ready();
this.canvas = new fabric.Canvas(this.$.c, {isDrawingMode: false});
console.log(this.canvas);
this.ctx = this.canvas.getContext('2d');
this.addEventListener('click', (e)=>this.handleClick(e));
this.addEventListener('change', (e)=>this.handleChange(e));
this.$.dropTargetDiv.addEventListener("dragover", (e)=>this.preventEventDefault(e));
this.$.dropTargetDiv.addEventListener("drop", (e)=>this.loadObject(e));
this.$.imageLoader.addEventListener("change", (e)=>this.readURL(e));
this.$.backgroundImageLoader.addEventListener("change", (e)=>this.readBackgroundURL(e));
this.$.textureImageLoader.addEventListener("change", (e)=>this.readTextureURL(e));
console.log('ready');
}
generateEditView(obj) {
console.log("generateEditView");
console.log(obj);
var html = "<br/><br/><b>Edit Properties</b><br/><br/>";
for(var key in obj) {
if(key === "stateProperties") {
console.log(key, obj[key]);
var o = obj[key];
for(var k in o) {
console.log(o[k], obj[o[k]]);
switch(o[k]) {
case 'top':
console.log("setting top from:", this.topProperty);
this.topProperty = obj[o[k]];
html += '<input type="number" value="{{topProperty}}" min="0" max="150" id="topProperty">';
html += '<input type="range" value="{{topProperty}}" min="0" max="150" id="topPropertyRange">';
html += '<br/>';
console.log("set to: " + this.topProperty);
break;
case ‘…’:
break;
default;
}
console.log("adding: " + html);
this.$.editView.innerHTML = html;
}
handleClick(e) {
console.log("hamdleClick: " + e.type);
console.log("click: " + e.currentTarget.tagName);
console.log(e);
var id = e.path[0].id;
console.log("id: " + id);
switch(id) {
case '':
console.log("No ID - This is mostlike a selet of an object");
var target = e.target;
var obj = this.canvas.getActiveObject();
console.log("target:" + target);
console.log("selected Object:" + obj);
console.log("selected Menu: " + this.selectedMenu);
if(this.selectedMenu === "control") {
this.generateEditView(this.canvas.getActiveObject());
}
break;
break;
case 'topProperty':
console.log("Change TopProperty", this.$.topProperty);
this.topProperty = this.$.topProperty;
break;
default:
}
}
这不工作，我得到以下运行时错误 聚合物-2- edit.html：1979年指定的值“{{topProperty}}”不是一个有效的数字。该值必须与以下正则表达式匹配： - ？（\ d + | \ d +。\ d + |。\ d +）（[eE] [ - +]？\ d +）？ 看起来生成的代码没有拿起绑定。
如果我将代码更改为以下div，则显示正确。 html + =''; 的html + =“”
但后来读这篇文章，$。topProperty或本。$当我不确定。topPropertyRange 我也曾尝试在后两个加平变化= changeProperty（本），我得到changeProperty是未定义消息在调试器中。
我怀疑它的功能是在聚合物之外，但我需要它在聚合物内来设置对象的属性。
是否有添加动态输入字段和处理更改的示例？