图形的加载

在konva中,有两种方式加载图片,其原理都是需要加载图片dom,等图片完全加载完成再置入canvas中,官方的例子是这样的:

var imageObj = new Image();
imageObj.onload = function() {
  var yoda = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    width: 106,
    height: 118
  });

  // add the shape to the layer
  layer.add(yoda);
  layer.batchDraw();
};
imageObj.src = '/assets/yoda.jpg';

这个还是能看懂,但是这种方式其实有个问题:

当我们导出json配置后,图片就会丢失,因为json只能是文本配置,不是dom这些。

官方在json哪又声明了一种新的方式:

Konva.Image.fromURL(imageURL, function(image){
   // image is Konva.Image instance
   layer.add(image);
   layer.draw();
 });

也就是说,konva中的Image对象,除了new方法,还有静态的fromURL方法,该方法提供了onload 这一系列操作,通过回调我们可以处理加载完成后的逻辑。

通过第二种写法,我想了下,将图片的配置改成这样:

{
    "attrs": {
        "id": "background",
        "lowestLevel": true,
        "src": "xxx713/96612a7bf1a6dd7ab76e05ff61618a12.png",
        "background": true,
        "x": 89,
        "y": 184,
    },
    "className": "Image"
}

不要配置image属性,增加一个自定义src属性,然后这样json就能导出,我们konva处理的时候,就直接读取src,然后处理就行了,个人使用的就是第二种方法。

这样我们导入导出图片的问题就解决了。

重点:

在konva的逻辑里,json配置是不会携带事件和图片dom的(本身也带不了),所以,图片这些是需要单独处理的,所以我们在json读取完毕后,再单独处理图片和事件。

导出json配置,图片width和height属性丢失

即便你再创建Konva.Image时,设置了width和height,但是在导出json时,会默认忽略,看官方解释是因为默认图片的宽高是用的图片实际的宽高,所以在导出后这个参数其实是无效的,反正最后就没有给你导出来。

官方建议就是使用自定义属性保存,这样下次使用就能读取

{
    "attrs": {
        "id": "background",
        "src": "xxxxmages/20210713/96612a7bf1a6dd7ab76e05ff61618a12.png",
        "lowestLevel": true,
        "background": true,
        "x": 89,
        "y": 184,
        "myWidth": 582,
        "myHeight": 432
    },
    "className": "Image"
}

配置差不多这样。

如果改动了图片大小,记得自定义的属性也调整一下

分类: konva库 标签: imagekonva

评论

全部评论 2

  1. 小月月小冰冰
    小月月小冰冰
    Google Chrome Windows 10

    直接给下面这个方法里添加src /myWidth/myHeight不可以吗
    var imageObj = new Image();
    imageObj.onload = function() {
    var yoda = new Konva.Image({
    x: 50,
    y: 50,
    image: imageObj,
    width: 106,
    height: 118
    });

    // add the shape to the layer
    layer.add(yoda);
    layer.batchDraw();
    };
    imageObj.src = '/assets/yoda.jpg';

    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @小月月小冰冰随你啊,你觉得哪种方式好就用哪种

目录