javascript - 了解在 Kinetic.JS 中放置图像？

Question

下面是我正在处理的作业的一些代码。在没有学习 JavaScript 基础的情况下被安排参加第二年类(class)，我有点墨守成规。

我正在尝试放置三个图像，并能够稍后使用函数来调用它们来更改其不透明度。

当我放置图像时，一次似乎只有一个图像想要出现，当我调用它们时，我被告知它们不存在。

// Create the canvas based on the existing div for it in the HTML file

var stage = new Kinetic.Stage
({
    container: 'canvasContainer',
    width: 600,
    height: 600
});

  /* /////////////////////////////////////////////////////
    C O D E   F O R   L O A D I N G   U P   I M A G E S
  ///////////////////////////////////////////////////// */

    var characters = new Kinetic.Layer();
    stage.add(characters);

    window.onload = function()
    {

        var majoraCharacter = new Image();

        majoraCharacter.src ="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg"

        majoraCharacter.onload = function()
        {
        character1= new Kinetic.Image({ x: 400, y: 300, width: 150, height: 150, offset: {x: 75, y: 75}, image: majoraCharacter});
        characters.add(character1);
        characters.draw();
        }

    }

    window.onload = function()
    {

        var amaterasuCharacter = new Image();

        amaterasuCharacter.src ="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg"

        amaterasuCharacter.onload = function()
        {
        character2= new Kinetic.Image({ x: 400, y: 200, width: 150, height: 150, offset: {x: 75, y: 75}, opacity:0.5, image: amaterasuCharacter});
        characters.add(character2);
        characters.draw();
        }

    }

    window.onload = function()
    {

        var toothlessCharacter = new Image();

        toothlessCharacter.src ="https://upload.wikimedia.org/wikipedia/commons/3/34/Red_star.svg"

        toothlessCharacter.onload = function()
        {
        character3= new Kinetic.Image({ x: 400, y: 100, width: 150, height: 150, offset: {x: 75, y: 75}, image: toothlessCharacter});
        characters.add(character3);
        characters.draw();
        }

    }



  /* /////////////////////////////////////////////////////
          C A N V A S   F U N C T I O N A L I T Y
  ///////////////////////////////////////////////////// */

      // Create new layer for background images

      // Create layer for character images

      var character = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 100,
        y: 100,
        width: 150,
        height: 150,
        fill: 'grey',
        strokeWidth: 4,
        offset: {x: 75, y: 75},
      });

      // add the shape to the layer
      character.add(rect);

      // add the layer to the stage
      stage.add(character);

有没有办法可以更好地将图像添加到 Canvas ？

是什么阻止它们共存以及在其加载功能之外进行编辑？

非常感谢任何及所有答案!

Answer 1

演示:http://jsfiddle.net/m1erickson/Bf88D/

一些 KineticJS 基础知识:

• KineticJS 从一个阶段开始。
• 舞台是添加到舞台的一个或多个层的容器
• 每一层实际上都是一个 Canvas
• 将形状(包括图像)添加到图层中。

由于您是 JavaScript 新手，因此这里概述了如何构建您的项目

• 只需使用一个 window.onload 并将所有 javascript 放入该一个 window.onload
• 提前加载所有图像，以便可以在 Canvas 上绘制
• 加载所有图像后，然后从中创建 Kinetic.Image 对象。

这是一个图像加载器，它会提前加载所有图像，然后在图像完全加载时调用 start 函数。

// image loader

var imageURLs=[];  // put the paths to your images here
var imagesOK=0;
var imgs=[];
imageURLs.push("");
loadAllImages(start);

function loadAllImages(callback){
    for (var i=0; i<imageURLs.length; i++) {
        var img = new Image();
        imgs.push(img);
        img.onload = function(){ 
            imagesOK++; 
            if (imagesOK>=imageURLs.length ) {
                callback();
            }
        };
        img.onerror=function(){alert("image load failed");} 
        img.crossOrigin="anonymous";
        img.src = imageURLs[i];
    }      
}

function start(){
    // the imgs[] array holds fully loaded images
    // the imgs[] are in the same order as imageURLs[]
    // use the images now!
}

加载所有图像后，您可以使用此可重用功能在图层上添加动态图像。

• 您发送一张预先加载的图像。
• 您还可以发送您想要放置图像的 x,y 位置。
• 您还可以发送您想要调整图像大小的宽度和高度。

此函数向图层添加一张新图像

function addKineticImage(image,x,y,w,h){
    var image = new Kinetic.Image({
        x:x,
        y:y,
        width:w,
        height:h,
        image:image,
        draggable: true
    });
    layer.add(image);
    layer.draw();
}