Question

我正在构建一个图表编辑器，它运行正常，拖动和放大丢弃，复制和过去一切正常。但我对图像有些麻烦。我有一个render（）函数，每次更改时都会运行。在render函数内部，我调用appendImg代码。这在第一次运行渲染时完成。但是下一次，我进入了else代码块，图像没有在画布上渲染。我有这个if.else逻辑她，因为如果我每次运行img.onload都会改变，每次都会加载图像，并且屏幕上会出现很多闪烁现象。据我所知，当img obj与数组一起存储时，drawImage就像它一样，我似乎无法绕过它。

var images = []; //An array where images are stored.

appendImg = function(inx, url, x, y, w, h) {

  if (!images[inx]) {
    var img = new Image();
    img.onload = function()
    {
        dg_context.drawImage(img, x, y, w, h);
        images[inx] = img;
    }
    img.src = url;
  }else{
    var img = images[inx];
    console.log(img);
    dg_context.drawImage(img, x, y, w, h);
  }
}

Answer 1

尝试将inx存储为img的属性，以便在onload中记住inx：

var images = []; //An array where images are stored.

appendImg = function(inx, url, x, y, w, h) {

  if (!images[inx]) {
    var img = new Image();
    img.onload = function()
    {
        dg_context.drawImage(img, x, y, w, h);
        images[img.index] = img;
    }
    img.index=inx;
    img.src = url;
  }else{
    var img = images[inx];
    console.log(img);
    dg_context.drawImage(img, x, y, w, h);
  }
}

HTML5画布和drawImage

1 个答案: