通过在FabricJS Canvas中显示图像来解决聚合物元素错误

Posted 2021-04-12

我正在尝试在Polymer Element中的FabricJS Canvas上显示一个Image。通过这样做，出现此错误：

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)

是否可以在Polymer Element内的FabricJs画布上显示图像？还是我犯了一个错误？我是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>

答案

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不会返回任何东西。您需要传递源URL和回调函数，并将该图像添加到回调函数中。