html5-canvas - 如何获取 Cytoscape Canvas Context 的引用？

Question

我需要对 Cytoscape Canvas 对象及其 2D 上下文的引用。我怎样才能做到这一点？我在 Canvas 上没有看到任何“id”属性。

谢谢

Answer 1

您可以通过以下方式获取 Cytoscape 的 Canvas 元素及其上下文...

var canvas = document.querySelector('canvas[data-id="layer2-node"]');
var context = canvas.getContext('2d');

---

这是一个示例，展示了如何使用上下文在 Canvas 上绘制内容...

var cy = cytoscape({
    container: document.getElementById('cy'),
    elements: [
        { data: { id: 'a' } },
        { data: { id: 'b' } },
        {
            data: {
                id: 'ab',
                source: 'a',
                target: 'b'
            }
        }
    ]
});

var canvas = document.querySelector('canvas[data-id="layer2-node"]');
var context = canvas.getContext('2d');

// draw rectangle using general canvas method
function draw() {
    context.fillRect(canvas.width / 2.1, 60, 30, 30);
    requestAnimationFrame(draw);
}
draw();

<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.1.0/cytoscape.min.js"></script>
<div id="cy" style="width: 100%; height: 100%; position: absolute; top: 0px; left: 0px;"></div>