将流星图添加到现有的Kinetic.JS应用程序

我正在用kinetic.js构建游戏，并且我想在其中使用流星图显示一些折线图。图表需要根据游戏画布进行缩放并正确定位。我可以直接在应用程序中的现有图层中嵌入图表吗？将流星图添加到现有的Kinetic.JS应用程序

2013-11-15 Nicholas Ryall

您有几种选择：

1）层上的KineticJS舞台顶部的MeteorCharts可视化这样

<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中的引用进行修改的

来源

2013-11-16 04:15:05

谢谢埃里克。我正在使用＃3，这是我需要的，但它只是部分复制到舞台上。网格，标题和图例似乎被正确移动，但绘制的线条和背景保持在相同的位置。 –

我最终将每个Meteor图层中的单个节点复制到Kinetic.JS阶段中的现有组。

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

这会导致图表被正确定位，但是没有任何交互性事件可以工作。这些事件是否属于Meteor阶段？

来源

2013-12-02 22:51:09

将流星图添加到现有的Kinetic.JS应用程序

回答

相关问题