javascript - Raphaëljs 选择纸张

Question

我正在尝试引用由 Raphaël.js 创建的画布元素。问题是，按照我的使用方式，Raphaël.js 将创建一个覆盖旧画布的新画布。使用 jQuery 选择器我只能检索 DOM 节点，这不允许我在画布上绘制。

示例代码：

<div id='canvas_container' class='canvas_container'></div>

function x() {
  var panel = Raphael("canvas_container");
}

function y() {
  Raphael("canvas_container"); // will create new canvas
  $("#canvas_container"); // doesn't allow me to draw on the canvas
}

x();
y();

Answer 1

Raphael 目前只公开了使用您提供的 id 作为节点的子节点创建新 Paper 的功能，而不是从 DOM 节点检索 Paper。在示例代码中，您创建了两个单独的论文。为了只创建一个并重复使用它，您需要保留对原始 Paper 的引用。实现这一目标的一种可能性是：

(function() {
  var paper;
  function x() {
    paper = Raphael("canvas_container");
  }
  function y() {
    var c = paper.rect(10, 10, 50, 50);
  }
  x();
  y();
})();