单击图像数组将它们添加到 Konva 阶段答案

【问题标题】：Clicking on array of images to add them to Konva stage单击图像数组将它们添加到 Konva 阶段
【发布时间】：2016-01-26 08:19:59
【问题描述】：

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

创建一个由图像数组填充的菜单，并为每个图像分配一个与其图像名称相同的 id 值。顺利完成。
单击任何一个或多个菜单图像以将每个图像绘制到 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/

【问题讨论】：

标签： canvas html5-canvas kineticjs konvajs

【解决方案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/（点击图片添加到舞台）

【讨论】：

嗨 lavrton，感谢您提供优雅的解决方案和学习机会！我喜欢你构建代码的方式。

【解决方案2】：

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

【讨论】：

虽然欢迎使用此代码 sn-p，并且可能会提供一些帮助，但它会是 greatly improved if it included an explanation of how 和 why 这解决了问题。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人！请edit您的答案添加解释，并说明适用的限制和假设。