Question

我用Raphael.js编写了一个小应用程序，用SVG绘制节点网络并根据给定的选择重新排列它。

我需要做的是捕捉我绘制的svg图片并将其显示在＆＃34; mini-map＆＃34;屏幕底部的显示类型。由于我不知道画布捕获时画布的样子，我想知道是否可以将它作为位图或类似的东西捕获？

把一个快速的小提琴放在一起显示我的意思：

http://jsfiddle.net/WNnCH/1/

有没有办法做一些事情：SVG.copy？还是SVG.img？（我确定没有，但你知道我的意思吗？）

我已经查看了如何捕获整个SVG并调整它的大小（这比我想要编写的代码更多或者是必要的代码），甚至可以复制整个SVG，但是我不知道是否有可能将svg捕获为图像并将其缩小到我需要的程度。

小地图并不需要是一个SVG，它只能是一个图像，因为它基本上只是一个先前动作的屏幕看起来的历史。

感谢所有建议！

Answer 1

您可以通过创建指向第一个SVG的不同按比例缩小的SVG轻松制作主SVG的缩略图。

<div id="main">
    <svg id="mainsvg" viewBox="0 0 1000 1000">
        <rect x="100" y="100" width="500" height="500" fill="green"
              transform="rotate(10,350,350)"/>
        <rect x="400" y="400" width="500" height="500" fill="orange"
              transform="rotate(-10,650,650)"/>
    </svg>
</div>


<div id="thumb">
    <svg xmlns:xlink="http://www.w3.org/1999/xlink">
        <use xlink:href="#mainsvg" />
    </svg>
</div>

SVG大小由CSS确定：

#main {
    width: 400px;
    height: 400px;
}

#thumb {
    width: 80px;
    height: 80px;
}

您可以对主SVG执行任何操作，拇指将反映所有更改。

Demo here

Answer 2

有一种方法可以使用Raphael完成此操作，使用您的迷你地图元素创建一个集合，然后克隆它。然而，由于您希望小地图是一个单独的实体/纸张，因此它更棘手。我从this answer借用了一些代码来将您的地图克隆到一篇新论文并且效果很好（jsfiddle）

(function (R) {
    var cloneSet; // to cache set cloning function for optimisation

    /**
     * Clones Raphael element from one paper to another
     *     
     * @param {Paper} targetPaper is the paper to which this element 
     * has to be cloned
     *
     * @return RaphaelElement
     */
    R.el.cloneToPaper = function (targetPaper) {
        return (!this.removed &&
            targetPaper[this.type]().attr(this.attr()));
    };

    /**
     * Clones Raphael Set from one paper to another
     *     
     * @param {Paper} targetPaper is the paper to which this element 
     * has to be cloned
     *
     * @return RaphaelSet
     */
    R.st.cloneToPaper = function (targetPaper) {
        targetPaper.setStart();
        this.forEach(cloneSet || (cloneSet = function (el) {
            el.cloneToPaper(targetPaper);
        }));
        return targetPaper.setFinish();
    };
}(Raphael));

var paper = Raphael(30, 30, 200, 200);
var circle = paper.circle(30, 30, 30);
circle.attr("fill", "#ccc");
var circle1 = paper.circle(70, 70, 30);
circle1.attr("fill", "#ccc");
var circle2 = paper.circle(110, 30, 30);
circle2.attr("fill", "#ccc");
var circle3 = paper.circle(30, 110, 30);
circle3.attr("fill", "#ccc");
var circle4 = paper.circle(110, 110, 30);
circle4.attr("fill", "#ccc");

var s = paper.set();
s.push(circle, circle1, circle2, circle3, circle4);

var minipaper = Raphael(document.getElementById("minimap").getElementsByTagName("div")[1], 140, 140);
var miniset = s.cloneToPaper(minipaper);
miniset.transform("s0.5,0.5,55,55"); // scale by 0.5 around (55,55)

捕获SVG并重新缩放为缩略图

2 个答案: