Question

我正在尝试根据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指定值＆＃34; {{topProperty}}＆＃34;不是有效的数字。该值必须与以下正则表达式匹配： - ？（\ d + | \ d +。\ d + | |。\ d +）（[eE] [ - +]？\ d +）？看来生成的代码没有获取绑定。

如果我将代码更改为以下内容，则div会正确显示。 html + =＆＃39;＆＃39 ;; html + =＆＃39;＆＃39;

但是当我读到这个时，我得到了未定义，$。topProperty或者这个。$。topPropertyRange 我也尝试在后两个上添加onchange = changeProperty（this），我在调试器中得到了changeProperty未定义的消息。

我怀疑它希望功能在聚合物之外，但我需要在聚合物内部设置物体属性。

是否有添加动态输入字段和处理更改的示例？

Answer 1

我仍未成功获得动态html生成的代码。我尝试使用dom重写代码：如果它不能按照我想要的方式工作。

那说我已经通过编写静态代码并使用css来隐藏不需要的选择并显示我需要的部分来完成我的目标。

我添加了这个css类

.hide {
    display: none;
    visibility: hidden;
}

然后我为每个元素创建了一个div，并将“Edit”附加到div id的属性名称

<div id="topEdit">
    <label for="top">Top:</label>
    <input type="number" value="{{top::input}}" min="0" max="150" id="top">
    <input type="range" value="{{top::input}}" min="0" max="150" id="topRange">
    <br/>
</div>
<div id="leftEdit">
    <label for="left">Left:</label>
    <input type="number" value="{{left::input}}" min="0" max="150" id="left" onchange="{{Change}}">
    <input type="range" value="{{left::input}}" min="0" max="150" id="leftRange">
    <br/>
</div>
<div id="widthEdit">
    <label for="width">Width:</label>
    <input type="number" value="{{width::input}}" min="0" max="150" id="width">
    <input type="range" value="{{width::input}}" min="0" max="150" id="widtnRange">
    <br/>
</div>

我使用此功能隐藏ID为“编辑”的所有元素

clearView() {
    // hide the Edit Elements
    var elements = this.$;
    for(var key in elements) {
        var element = elements[key];
        var elementId = element.id;
        if(!!elementId.match(/.*Edit$/)) {
            element.classList.add('hide');
        }
    }
}

然后原始代码循环遍历活动对象，并从欣赏元素中删除css hide类。这种方法被修改，因为选择的一些html元素没有直接对应于objects元素，我决定不想为每个属性提供字段。修改后的代码基于我使用字段数组的所选对象类型

当用户点击一个对象时，我执行类似于以下示例的代码。

此示例适用于文本或iText对象。

var fields = [
    "fontWeight", //  normal, bold
    "fontStyle", //  normal, italic, oblique, ''
    "textDecoration", //  underline, linethrough, overline
    "fontFamily",
    "textAlign",
    "stroke",
    "backgroundColor",
    "textBackgroundColor",
    "strokeWidth",
    "fontSize",
    "lineHeight",
    "charSpacing",
    "shadow", //  shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY
    "shadowColor",
    "shadowBlur",
    "shadowOffsetX",
    "shadowOffsetY",
    "text",
    "addText"
];

以下代码删除了css hide类并显示了相应的元素。

for(var key in fields) {
    var id = fields[key] + "Edit";
    var element = this.$[id];
    if(element) {
        element.classList.remove('hide');
    }
}

这种方法适用于我，并为所选元素提供完全双向绑定。

聚合物

1 个答案: