在 FabricJS 中显示图像导致聚合物元素错误 Canvas

Question

我正在尝试在我的聚合物元素内的 FabricJS Canvas 上显示图像。通过这样做，出现此错误：

Uncaught TypeError: Cannot read property '_set' of undefined
at klass._onObjectAdded (fabric.js:6964)
at klass.add (fabric.js:260)
at HTMLElement.ready (convert-section.html:97)
at HTMLElement._enableProperties (property-accessors.html:531)
at HTMLElement.connectedCallback (element-mixin.html:630)
at HTMLElement._attachDom (element-mixin.html:690)
at HTMLElement._readyClients (element-mixin.html:663)
at HTMLElement._flushClients (property-effects.html:1518)
at HTMLElement._propertiesChanged (property-effects.html:1644)
at HTMLElement._flushProperties (property-accessors.html:549)

是否可以在我的聚合物元素内的 FabricJs canvas 上显示图像？还是我弄错了？我是 Polymer 的新手，没有太多经验。

我可以显示三角形等形状

这是我的元素：

<link rel="import" href="../../bower_components/polymer/polymer-element.html">
<link rel="import" href="my-paper-element-styles.html">

<dom-module id="convert-section">
     <template>
    <style include="my-paper-element-styles">
    </style>

  <canvas  id="convertCanvas" ></canvas>

  </template>
     <script>
          class ConvertSection extends Polymer.Element {
               static get is() {
                    return 'convert-section';
               }
               static get properties() {
                    return {
                         imageLocationPath: {
                              type: String,
                              notify: true
                         }
                    };
               }
               disconnectedCallback() {
                 super.disconnectedCallback();
                 this.imageLocationPath = "";
               }
               ready() {
                    super.ready();
                    this.canvas = this.__canvas = new fabric.Canvas(this.$.convertCanvas);
                    var height = window.innerHeight - 48;
                    var width = window.innerWidth - 300;
                    this.canvas.setHeight(height);
                    this.canvas.setWidth(width);
                    var image = fabric.Image.fromURL('img/viper-board.png');
                    this.canvas.add(image);
               }

          }
          window.customElements.define(ConvertSection.is, ConvertSection);
     </script>
     <script src="../../node_modules/fabric/dist/fabric.js"></script>
</dom-module>

Answer 1

ready() {
  super.ready();
  var self = this;
  self.canvas = self.__canvas = new fabric.Canvas(self.$.convertCanvas);
  var height = window.innerHeight - 48;
  var width = window.innerWidth - 300;
  self.canvas.setHeight(height);
  self.canvas.setWidth(width);
  fabric.Image.fromURL('img/viper-board.png',function(oImg){
   oImg.set({
    left:10,
    top:10
   });
   self.canvas.add(oImg);
  });
}

如您所见，fromURL 没有 return 任何内容。您需要传递来源 url 和一个回调函数，并将该图像添加到回调函数中。

在 FabricJS 中显示图像导致聚合物元素错误 Canvas

Polymer Element Error by displaying Image inside FabricJS Canvas

html

javascript

canvas

fabricjs

polymer