При нажатии на массиве изображений, чтобы добавить их к Konva стадии

Question

Я учусь Konvajs и HTML5 Canvas и сталкиваюсь некоторые вопросы:

1. Создания меню, населенное множество изображений и присвоить каждое изображение значение идентификатора, равное к его имени изображения. Выполнено без проблем.

2. При нажатии на какой-либо одной или нескольких изображений меню, чтобы сделать каждое изображение на Konva этапе для дальнейшей обработки, как вращающаяся и т.д. Возникли проблемы с этим:

var pics = ["pic1.png", "pic2.png"]; 
 
$.each(pics, function(index, value) 
 
{ 
 
    id = value.slice(32, -4); 
 
    $('#menu').append("<img src=' " + value + " ' " + id + " " + "/>"); 
 
});

Полный код по адресу: https://jsfiddle.net/tommy6s/a44hbsc2/

Answer 1

Просто сделайте код проще:

//// INIT CANVAS 
var stage = new Konva.Stage({ 
    container : "container", 
    width : 400, 
    height : 300 
}); 
var layer = new Konva.Layer(); 
stage.add(layer); 


/////MENU 
var pics = ["http://konvajs.github.io/assets/lion.png", "http://konvajs.github.io/assets/monkey.png"]; 

var $menu = $('#menu'); 
$.each(pics, function(index, value) { 
    $("<img/>") // create image 
     .attr('src', value) // set src to image link 
     .appendTo($menu) 
     .on('click', function() { 
      // this here is image object 
      var src = this.src; 
      // create new Konva.Image from src attribute 
      Konva.Image.fromURL(src, function(image) { 
       // make it draggable 
       image.setAttrs({ 
        draggable: true 
       }); 
       // append to layer 
       layer.add(image); 
       // update layer 
       layer.draw(); 
      }) 
     }); 
}); 

Demo: https://jsfiddle.net/6tnb2q2q/ (нажмите на изображение, чтобы добавить его в сцену)

Answer 2

var pics = ["pic1.png", "pic2.png"]; 
 
$.each(pics, function(index, value) 
 
{ 
 
    id = value.slice(32, -4); 
 
    $('#menu').append("<img src=' " + value + " ' " + id + " " + "/>"); 
 
});