Question

有没有办法在一组中将一堆纸元素组合在一起，只有在纸上设置的位置？

例如At This Example我试图将一些圆圈放在一个矩形的边上，然后将矩形放在纸张的每个部分。你能告诉我怎么做吗？

  var paper = Raphael('my-canvas', 500, 300);
  paper.canvas.style.backgroundColor = '#F00';
  var rect = paper.rect(5, 5, 100, 100);

  var st = paper.set();
  st.push(
  rect.circle(10, 10, 5),
  rect.circle(30, 10, 5));

Answer 1

你可以通过对集合的变换来做到这一点（你也可以用另一个属性来做，比如x，y，但只有当元素使用那个特定的属性时）。

值得注意的是，虽然您可以将变换应用于集合，但它实际上将变换应用于集合中的每个元素。即Raphael中没有特定的“set”或“group”元素（Snap.svg中有更新的兄弟，但不具备相同的向后兼容性）。因此，没有真正的群体层次结构，他们可以在其中进行单独的变换，这些变换会逐渐降级。

var paper = Raphael('my-canvas', 500, 300);
paper.canvas.style.backgroundColor = '#F00';
var rect = paper.rect(5, 5, 100, 100);



var st = paper.set();
st.push(
    paper.rect(5, 5, 100, 100),
    paper.circle(10, 10, 5).attr({ fill: 'blue' }),
    paper.circle(30, 10, 5).attr({ fill: 'green' })
);

st.transform('t20,20');
st.animate({ transform: 't100,100' }, 2000);

如果不确定here

，它值得查看Raphael docs for transforms

jsfiddle

Answer 2

您可以创建新的div，向此paper添加新的div元素，然后更改div的位置，而不是使用集合。

如果您使用的是jquery，它可能看起来像这样：

$(".body").append('<div id="setContainer"></div>');
paper = new Raphael(document.getElementById("setContainer"), 500, 300);
paper.canvas.style.backgroundColor = '#F00';
var rect = paper.rect(5, 5, 100, 100);
var circle = paper.circle(10, 10, 5);
var circle2 = paper.circle(30, 10, 5);

// then you can adjust the position of the div, for example to 100,100
$("#setContainer").css("top", 100);
$("#setContainer").css("left", 100);

使用这种方法而不是使用集合的优点在于，它为您操作要组合在一起的元素提供了更大的灵活性。

如果要创建同一组元素的多个实例，甚至可以围绕此代码包装函数，以便以编程方式定义容器的id。

在Raphael Paper中定位一套

2 个答案: