学习fabric.js - Githubissues

349989153 commented 3 years ago

之前做过一个h5，是用createjs做的，虽然是Adobe出品，可以配合Animate.cc使用，但是年代久远，api可理解度也差，所以看看有没有更方便的h5 canvas库。网上搜了一下，有个叫fabric.js的东西，可以考虑一下。

349989153 commented 3 years ago

1、最开始遇到一个问题，加载图片读不出来。

html：

<canvas id="canv" class="abs" width="750" height="1464" style="background-color:#000;"></canvas>

js:

(function () {
  var CANVAS = new fabric.Canvas('canv');
  fabric.Object.prototype.transparentCorners = false;
  fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

  fabric.Image.fromURL("../../../../yxyj.heymeo.net/yxyj.heymeo.net/img/i/0/Z25_3.jpg", function (img) {
    console.log('img', img);
    CANVAS.add(img);
    // CANVAS.renderAll();
  });

  (function animate() {
    CANVAS.renderAll();
    fabric.util.requestAnimFrame(animate);
  })();

})();

结果怎么都看不到图片

万般无奈去检查元素，却发现canvas上面还盖着一个canvas，叫upper-canvas

而且和页面里原先的canvas一样，background-color也是黑色

原来这是fabric自己生成的，而且bg和原先的一样

把原来的canvas的bg去掉即可

349989153 commented 3 years ago

2、后面遇到的一个问题，加载的图片有时显示有时不显示

比如，以下是一张背景和背景上有几个汉字的图片

// 背景
fabric.Image.fromURL("../../../../yxyj.heymeo.net/yxyj.heymeo.net/img/i/0/Z25_3.jpg", function (img) {
    img.set({
      selectable: false,
    });
    CANVAS.add(img);
  });
// 汉字
  fabric.Image.fromURL("../../../../yxyj.heymeo.net/yxyj.heymeo.net/img/i/0/Bitmap10.png", function (img) {
    img.set({
      scaleX: 0.5,
      scaleY: 0.5,
      left: 312,
      top: 90,
      selectable: false,
    });
    CANVAS.add(img);
  });
// 汉字
  fabric.Image.fromURL("../../../../yxyj.heymeo.net/yxyj.heymeo.net/img/i/0/Bitmap11.png", function (img) {
    img.set({
      scaleX: 0.5,
      scaleY: 0.5,
      left: 312,
      top: 140,
      selectable: false,
    });
    CANVAS.add(img);
  });

然后刷新的时候发现，那几个汉字时而显示，时而不显示，时而显示一个、两个。

仔细想了想才明白，原来是加载的时间不同，导致canvas.add的顺序也不同。有时候背景先加载好，有时候汉字先加载好。

给背景设置：

CANVAS.add(img);
CANVAS.moveTo(img, 0);

349989153 commented 3 years ago

3、想找个轻量好用的load库，来预加载资源，结果没找到，感觉还是createjs的preloadjs好用啊。

但是preloadjs无法单独工作，而是需要createjs的一些基础，无法做到轻量，这就有点操蛋了。

349989153 commented 3 years ago

4、gdevelop看起来是个不错的游戏引擎，看看能不能用做游戏的思路去做h5

349989153 / 349989153.github.io

学习fabric.js #20