Сделать kineticjs использовать существующий холст

Question

Я пытаюсь использовать kinetic.js с существующим холстом. Проблема в том, что API kinetic.js требует, чтобы вы указали идентификатор элемента-контейнера, а затем kinetic.js создает Kinetic.Stage (который создает и использует свой собственный холст).

Например:

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 

    var layer = new Kinetic.Layer(); 

    var rect = new Kinetic.Rect({ 
    x: 239, 
    y: 75, 
    width: 100, 
    height: 50, 
    fill: 'green', 
    stroke: 'black', 
    strokeWidth: 4 
    }); 

    // add the shape to the layer 
    layer.add(rect); 

    // add the layer to the stage 
    stage.add(layer); 
</script> 

Я хочу, чтобы иметь возможность использовать существующий холст элемент с kinetic.js вместо него создать свою собственную. Это возможно?

A similar question был задан вопрос раньше, однако, похоже, он не дает правильного ответа.

Любые идеи? Благодаря!

Answer 1

Холст html - всего лишь куча пикселей.

Вы можете преобразовать эти пиксели в изображение, а затем использовать это изображение в качестве источника для Kinetic.Image.

// create an image from the existing canvas 

var canvas2Image=new Image(); 
canvas2Image.onload=function(){ 

    // create a Kinetic.Image using that image 

    var kImage=new Kinetic.Image({ 
     x:0, 
     y:0, 
     width:canvas2Image.width, 
     height:canvas2Image.height, 
     image:canvas2Image 
    }); 

} 
canvas2Image.src=canvas.toDataURL();