pts.js 'NS_ERROR_NOT_AVAILABLE： ' 尝试将图像用于粒子时出错

Question

我想为pts中的粒子加载相同的图像.js。

当我尝试使用资产文件夹中的本地映像时，我在控制台中收到错误"NS_ERROR_NOT_AVAILABLE："。

我在某处读到这可能是由于图像在加载之前就试图使用......

我还尝试使用指向其他图像而不是本地图像的外部链接，并且有效。所以不确定我的本地文件发生了什么。

编辑：

我刚刚在 chrome 而不是火狐上尝试了这个，我收到了一条新的、更详细的错误消息。

"未捕获的 DOMException：无法在 'CanvasRenderingContext2D' 上执行 'drawImage'：提供的 HTMLImageElement 处于'损坏'状态.js。

仍然不确定到底出了什么问题。

Pts.quickStart('#hello', 'transparent')
var world
// Loading in image to be used
var myImg = new Image()
myImg.src = '/assets/img/myImage.png'
space.add({
  start: (bound, space) => {
    // Create world and 100 random points
    world = new World(space.innerBound, 1, 0)
    let pts = Create.distributeRandom(space.innerBound, 20)
    // Create particles and hit them with a random impulse
    for (let i = 0, len = pts.length; i < len; i++) {
      let p = new Particle(pts[i]).size(i === 0 ? 10 : 20)
      p.hit(0, 0)
      world.add(p)
    }
    world.particle(0).lock = true
  },
  animate: (time, ftime) => {
    world.drawParticles((p, i) => {

// Image variable for the particle to be drawn as
      form.image(myImg)
    })
    world.update(ftime)
  },
  action: (type, px, py) => {
    if (type == 'move') {
      world.particle(0).position = new Pt(px, py)
    }
  },
  resize: (bound, evt) => {
    if (world) world.bound = space.innerBound
  }
})
space.bindMouse().bindTouch()
space.play()

Answer 1

要在画布上绘制图像，需要先加载图像。您可以使用myImg.addEventListener( 'load', ... )跟踪它。

加载后，您可以在 Pts 的动画循环中form.image( myImg, ... )使用它。

下面是一个基于上述代码的工作示例：

Pts.quickStart( "#pt", "#123" );
//// Demo code starts (anonymous function wrapper is optional) ---
(function() {
  var world;
  var imgReady = false;
    // Loading in image to be used
    var myImg = new Image()
    myImg.src = 'http://icons.iconarchive.com/icons/icojoy/maneki-neko/256/cat-6-icon.png';
    myImg.addEventListener('load', function() {
        imgReady = true;
    }, false);
  space.add( {
    start: (bound, space) => {
      // Create world and 100 random points
      world = new World( space.innerBound, 1, 0 );
      let pts = Create.distributeRandom( space.innerBound, 100 );
      // Create particles and hit them with a random impulse
      for (let i=0, len=pts.length; i<len; i++) {
        let p = new Particle( pts[i] ).size( (i===0) ? 30 : 3+Math.random()*space.size.x/50 );
        p.hit( Num.randomRange(-50,50), Num.randomRange(-25, 25) );
        world.add( p );
      }
      world.particle( 0 ).lock = true; // lock it to move it by pointer later on
    },

    animate: (time, ftime) => {
      world.drawParticles( (p, i) => {
        if (imgReady) {
          console.log( p )
          form.image(myImg, [p.$subtract( p.radius ), p.$add( p.radius )] );
        }
      });
      world.update( ftime );
    },

    action:( type, px, py) => {
      if (type == "move") {
        world.particle( 0 ).position = new Pt(px, py);
      }
    },
    resize: (bound, evt) => {
      if (world) world.bound = space.innerBound;
    }
  });
  space.bindMouse().bindTouch();
  space.play();
})();