Question

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

当我想将不同的步骤分成他们自己的函数时，我遇到了麻烦，保存这些模式以便在另一个函数中使用。我的策略是编写一个.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();

我似乎无法将Kinetic.Image()画在我的容器上，这正是我所缺少的！我会非常感谢任何帮助。感谢。

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

0 个答案: