Question

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

创建一个由图像数组填充的菜单，并为每个图像指定一个等于其图像名称的id值。完成没有问题。
点击任意一个或多个菜单图像，将每个图像绘制到Konva舞台上，以便进行进一步操作，如旋转等。遇到问题：

＆＃13;

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

＆＃13;

完整代码：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

＆＃13;

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

＆＃13;

单击图像阵列将它们添加到Konva阶段

2 个答案: