Понимание размещения изображений в Kinetic.JS?

Question

Ниже у меня есть код для задания, над которым я работаю. Будучи размещенным на 2-м курсе без использования 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(); 
}