Question

下面我有一些我正在进行的作业的代码。在没有学习JavaScript基础的情况下进入第二年的课程，我有点陷入困境。

我正在尝试放置三张图片，稍后可以通过功能调用它们来改变它们的不透明度。

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

// 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);

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

是什么阻止它们共存，并且可以在其加载函数之外进行编辑？

非常感谢任何和所有答案！

Answer 1

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

一些KineticJS基础知识：

KineticJS从舞台开始。
舞台是一个或多个层的容器，添加到舞台
每个图层实际上都是一个画布
将形状（包括图像）添加到图层中。

由于您是javascript的新手，以下是如何构建项目的概述

只需使用一个window.onload并将所有javascript放在一个window.onload
提前加载所有图片，以便可以在画布上绘图
加载所有图像后，从中创建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();
}

了解如何在Kinetic.JS中放置图像？

1 个答案: