canvas - 单击图像数组将它们添加到 Konva 阶段

Question

我正在学习 Konvajs 和 HTML5 Canvas 并面临一些问题：

1. 创建一个由图像数组填充的菜单，并为每个图像分配一个与其图像名称相等的 id 值。顺利完成。

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();
            })
        });
});

演示：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 + " " + "/>"); 
});