Добавление Meteor Chart к существующему приложению Kinetic.JS

Question

Я строю игру с kinetic.js, и я хочу отобразить некоторые линейные диаграммы с использованием диаграмм Meteor внутри него. Диаграмма должна масштабироваться с помощью холста игры и правильно размещаться. Можно ли встроить диаграмму непосредственно в существующий слой в приложении?

Answer 1

У вас есть несколько вариантов:

1) слой визуализации MeteorCharts на верхней ступени KineticJS как этот

<div id="kineticjs-container"></div> 
<div id="meteorcharts-container"></div> 

2), если вам не нужна интерактивность, вы можете конвертировать данные MeteorCharts а именно в KineticJS изображение, а затем добавить его в свой KineticJS слой, как это

lineChart.stage.toImage({ 
    callback: function(img) { 
     kineticLayer.add(new Kinetic.Image({ 
      image: img 
     }); 
    } 
); 

3) если вам нужна интерактивность, вы также должны быть в состоянии переместить Мете orCharts слои в вашей сцене KineticJS, что-то вроде этого:

lineChart.stage.getChildren().each(function(layer) { 
    // remove the layer from the MeteorCharts KineticJS stage 
    layer.remove(); 

    // add the layer to your own KineticJS stage 
    kineticStage.add(layer); 
}); 

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

Answer 2

Я закончил копирование отдельных узлов из каждого слоя Метеор в существующую группу на моей стадии Kinetic.JS.

var group = new Kinetic.Group(); 
lineChart.stage.getChildren().each(function(layer, index) { 
    layer.getChildren().each(function(node) { 
    group.add(node); 
    }); 
}); 

Это приводит к правильной позиционированию диаграммы, однако ни одно из событий для интерактивности не работает. Связаны ли события с Метеорным этапом?