Question

我正在使用RaphaelJS在画布中绘制4个方框。

var paper = new Raphael(document.getElementById('canvas_container'), 512, 256);

var rectangle = paper.rect(50, 50, 50, 50),
    rectangle2 = paper.rect(400, 50, 50, 50);
    rectangle3 = paper.rect(50, 200, 50, 50);
    rectangle4 = paper.rect(400, 200, 50, 50);

rectangle2.attr("fill", "red");
rectangle3.attr("fill", "green");
rectangle4.attr("fill", "blue");

jsfiddle：http://jsfiddle.net/SFRWj/1/

-

我的问题：我想循环切割/分割我的svg画布4：左上角，右上角，左下角，右下角目的：我希望有4个单独的元素，然后我可以尝试转换为png或base64，或者只是用它们做一些事情。

任何想法？

更新1：

有两个for循环和

paper.setViewBox(i*viewStep,j*viewStep,128,128,false);

我有这样的事情：http://jsfiddle.net/SFRWj/3/

Answer 1

以下是svg.js的示例，但您可以通过Raphael实现相同的目标：

var src = 'http://distilleryimage11.s3.amazonaws.com/89ac2e90d9b111e297bf22000a1f9263_7.jpg'

/* create canvases */
var draw1 = SVG('canvas1').viewbox(0,0,75,75)
var draw2 = SVG('canvas2').viewbox(75,0,75,75)
var draw3 = SVG('canvas3').viewbox(0,75,75,75)
var draw4 = SVG('canvas4').viewbox(75,75,75,75)

/* draw image */
var image = draw1.image(src).size(150,150)

/* clone image to other canvases */
draw2.add(image.clone())
draw3.add(image.clone())
draw4.add(image.clone())

http://jsfiddle.net/wout/rgzG6/

这个例子基本上创建了四个svg画布，克隆了从第一个画布到另一个画布的内容，并为每个画布设置了一个视图框。如果你有多个元素，你可以考虑在克隆它们之前将所有内容放在一个组中。

分割/切割SVG盒子，RaphaelJS

1 个答案: