0

我正在使用 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/

4

1 回答 1

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 画布，将内容从第一个画布克隆到其他画布，并为每个画布设置一个视图框。如果您有多个元素，您可以考虑在克隆它们之前将所有内容放在一个组中。

于 2013-06-28T12:44:37.163 回答