Как скопировать сцену кинетики на другой холст

Я пишу приложение, в котором на странице могут быть сотни холстов. Вместо того, чтобы иметь накладные расходы на отдельный этап для каждого холста, я решил иметь редактор, который содержит этап. После завершения редактирования содержимое сцены должно быть скопировано на другой холст.

Stage предлагает toImage и toDataURL для получения содержимого, однако согласно этому тесту производительности оба эти метода будут очень медленными по сравнению с context.drawImage.

См.: http://jsperf.com/copying-a-canvas-element.

Поскольку я использую только один слой на сцене, а слой содержит холст, я подумал, что могу сделать это:

desticationCtx.drawImage(layer.getContext().canvas, 0,0);

к сожалению, это не дает никаких результатов (хотя оно работает)

Поскольку на сцене есть bufferCanvas, я также пробовал:

destinationCtx.drawImage(this.stage.bufferCanvas.element,0,0);

Опять никаких результатов, хотя я вижу содержимое на холсте сцены на странице.

Однако, если я покопаюсь на своей странице, чтобы добраться до фактического холста, созданного и используемого kineticjs:

destinationCtx.drawImage(document.getElementById('mydiv').children[0].children[0],0,0);

Я получаю результаты. Как правильно скопировать содержимое сцены кинетики на другой холст?


javascript kineticjs
person Paul van Dinther    schedule 28.11.2012    source источник

Ответы (2)


arrow_upward
3
arrow_downward

получить доступ к элементу холста слоя следующим образом:

var canvasElement = layer.getCanvas().getElement();

и такой контекст:

var context = layer.getCanvas().getContext();

Вот интересующие документы:

http://kineticjs.com/docs/Kinetic.Layer.html#getCanvas

http://kineticjs.com/docs/Kinetic.Canvas.html

person Eric Rowell    schedule 04.12.2012
comment
Клянусь, я пробовал это раньше, но, увы, это работает, и это определенно лучше, чем ужасные предположения, которые я делал с:document.getElementById('mydiv').children[0].children[0] - person Paul van Dinther; 10.12.2012

arrow_upward
0
arrow_downward

В последней и более новой версии кинетики метод из отмеченного как правильный ответа больше не работает. В настоящее время я просто использовал следующий подход для получения основного холста кинетики - с помощью jquery:

var canvas = $('#canvasDiv').find('canvas');
console.log("Canvas: %O", layerCanvas);

Просто замените

 #canvasDiv

с идентификатором вашего контейнера.

person Torsten Barthel    schedule 26.01.2016