Javascript Kineticjs-如何返回Kinetic.Image（）？

我需要允许用户制作一些模式，并将它们作为画布上的图像进行渲染。为此，我遵循了中非常好的答案所描述的步骤

当我想将不同的步骤分离到各自的函数中时，我遇到了麻烦。请保存这些模式，以便在另一个函数中使用。我的策略是编写一个.toDataURL方法并返回它，这被证明是很困难的

     function make_pattern(type, color) {
var pattern = document.createElement('canvas');
var cont=document.createElement('div');
var sta= new Kinetic.Stage({
    container:cont,
    width: 500,
height: 500
});
var lay=new Kinetic.Layer({
    width: 500,
height: 500
});

pattern.width = 40;
pattern.height = 40;
var pattco = pattern.getContext('2d');

switch (type) {
    case 'line' :
        pattco.moveTo(0, 40);
        pattco.lineTo(40, 0);
        pattco.lineWidth = 8;
        pattco.strokeStyle = color;
        pattco.stroke();
        break;
    case 'arc':
        for (i = 0; i < 2; i++) {
            pattco.beginPath();
            pattco.arc(40, 0, 20, (0.6 + i) * Math.PI, (0.9 + i) * Math.PI, false);
            pattco.lineWidth = 4;
            pattco.strokeStyle = color;
            pattco.stroke();
        }
        break;
    case 'circ':
        for (i = 0; i < 2; i++) {
            pattco.beginPath();
            pattco.arc(Math.floor(Math.random() * 16), Math.floor(Math.random() * 16), Math.floor(Math.random() * 2), 0, 2 * Math.PI, false);
            pattco.lineWidth = 2;
            pattco.fillStyle = color;
            pattco.stroke();
        }
        break;
    case 'rect':
        pattco.fillStyle = color;
        pattco.fillRect(0, 0, 20, 20);
        pattco.fillRect(20, 20, 20, 20);
        break;
}

var img = new Image();
img.onload =function() {
    var patt = new Kinetic.Image({
        x: 0,
        y: 0,
        fillPatternImage: img,
        width: 500,
        height: 500 
    });
    lay.add(patt);
    sta.add(lay);
    sta.draw();


       };
      img.src=pattern.toDataURL();

     return sta.toDataURL();

---

我似乎无法将动能图像绘制到我的容器上，这正是我所缺少的！我将非常感谢您的帮助。谢谢。

您在哪里。toDataURL函数？它就在函数的底部。我的主要困难和这个问题的重点是问我如何返回这个值，因为它可以被用户更改。经过一些搜索后，我发现这样做的一种方法是在函数中创建一个Kinetic.Group，在load事件中将图像添加到该值中，然后返回该组。这仍然感觉像是一种迂回的方式，我真的更喜欢直接访问Dynamic.Image对象。然而，所需的加载事件（在此之前图像不存在）使我很难理解这一点。