我正在尝试根据 fabric.canvas.object 中的属性动态生成一个 div。
以下是我的代码的摘录。
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:
}
}
这不起作用我收到以下运行时错误 polymer-2-edit.html:1979 The specified value "{{topProperty}}" is not a valid number。该值必须与以下正则表达式匹配:-?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)? 生成的代码似乎没有获取绑定。
如果我将代码更改为以下 div 将正确显示。html += ''; html += ''
但是当我阅读 this,$.topProperty 或 this.$.topPropertyRange 时我得到了 undefined 我也尝试在后两者上添加 onchange=changeProperty(this) 并且我在调试器中得到 changeProperty is undefined 消息。
我怀疑它期望该功能在聚合物之外,但我需要它在聚合物内部来设置对象属性。
是否有添加动态输入字段和处理所做更改的示例?