最近几天在用Typescript写一个基于Web的可视化的海报编辑器，核心是使用fabricjs进行canvas的绘制；

看到这个创建图片对象的定义有点儿郁闷：

1
2
3

fabric.Image.fromURL('my_image.png', function(oImg) {
  canvas.add(oImg);
});

创建完图片，做一个callback，本来是要通过写一些代码来抽象一下创建对象，这个callback处理起来就极其麻烦，还好有异步神器，做如下包装：

1
2
3
4
5
6
7

    private CreateImage(imgUrl: String) {
        return new Promise<fabric.Image>((resolve) => {
            fabric.Image.fromURL(imageUrl, function (oimg) {
                resolve(oimg)
            });
        });
    }

然后，一切重归有序：

1
2
3
4
5

     if (dobj instanceof DText) {
            fobj = new fabric.Text(dobj.text);
        } else if (dobj instanceof DImg) {
            fobj = await self.CreateImage(dobj);
        } else if (dobj instanceof DGroup) {}