Open 349989153 opened 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去掉即可
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);
3、想找个轻量好用的load库,来预加载资源,结果没找到,感觉还是createjs的preloadjs好用啊。
但是preloadjs无法单独工作,而是需要createjs的一些基础,无法做到轻量,这就有点操蛋了。
4、gdevelop看起来是个不错的游戏引擎,看看能不能用做游戏的思路去做h5
之前做过一个h5,是用createjs做的,虽然是Adobe出品,可以配合Animate.cc使用,但是年代久远,api可理解度也差,所以看看有没有更方便的h5 canvas库。网上搜了一下,有个叫fabric.js的东西,可以考虑一下。