Raphael路径调整大小并相对于容器移动 [英] Raphael path resize and move relative to container

问题描述

我正在尝试缩放/移动使用Raphael api创建的SVG路径。无论容器的大小如何，我都希望路径整齐地放在容器内。我搜索了参考文献，网页，我仍然在努力让这个工作起作用。

I am trying to scale/move an SVG path created with the Raphael api. I want the path to fit neatly within a container, no matter the size of the container. I have searched the reference, the web and I'm still struggling to get this to work.

如果有人能告诉我为什么这不起作用，我会非常高兴。

If anyone can tell me why this isn't working, I would be very happy.

这个小提琴告诉你我在做什么： http://jsfiddle.net/tolund/3XPxL/5/

This fiddle shows you what I'm doing: http://jsfiddle.net/tolund/3XPxL/5/

JavaScript：

JavaScript:

var draw = function(size) {
    var $container = $("#container").empty();
    $container.css("height",size+"px").css("width",size+"px");

    var paper = Raphael("container");

    var pathStr = "M11.166,23.963L22.359,17.5c1.43-0.824,1.43-2.175,"+
        "0-3L11.166,8.037c-1.429-0.826-2.598-0.15-2.598,"+
        "1.5v12.926C8.568,24.113,9.737,24.789,11.166,23.963z";

    // set the viewbox to same size as container
    paper.setViewBox(0, 0, $container.width(), $container.height(), true);

    // create the path
    var path = paper.path(pathStr)
        .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 });

    // get the path outline box (may be different size than view box.
    var box = path.getBBox();

    // move the path as much to the top/left as possible within container
    path.transform("t" + 0 + "," + 0);

    // get the width/height based on path box relative to paper (same size as container)
    var w = (paper.width) / box.width;
    var h = (paper.height) / box.height;

    // scale the path to the container (use "..." to compound transforms)
    path.transform('...S' + w + ',' + h + ',0,0');
}

$(function() {
    var currentSize = 30;
    draw(currentSize);

    $("#smaller").click(function(){ 
        currentSize = currentSize < 10 ? currentSize : currentSize * 0.5;
        draw(currentSize);
    });
    $("#bigger").click(function(){ 
        currentSize = 300 < currentSize ? currentSize : currentSize * 2; 
        draw(currentSize);
    });
});

HTML：

<button id="smaller">-</button>
<button id="bigger">+</button>

<div id="container" style="border: 1px #ddd solid; margin: 30px">

</div>

谢谢，
Torgeir。

Thanks, Torgeir.

推荐答案

我认为你的问题是对视箱有用的基本误解。在您的代码中，您尝试设置svg元素的视图框以使其与屏幕的坐标空间匹配，然后转换路径以匹配该坐标空间。没有技术上的理由你不能这样做，但它确实有效地从可扩展矢量图形中取出可扩展。视图框的整个点是在矢量坐标空间和屏幕相对之间进行平移。

I think your problem is a fundamental misunderstanding of what the viewbox is useful for. In your code, you're attempting to set the viewbox of the svg element so that it matches the coordinate space of the screen, and then transform the path to match that coordinate space. There's no technical reason you can't do this, but it does effectively take the "Scalable" out of "Scalable Vector Graphics." The entire point of the viewbox is to make the translation between the vector coordinate space and the screen relative.

解决问题的最佳方法是不转换匹配SVG元素的路径，但使用视图框让SVG的内在可伸缩性为您完成此任务。

The best way to solve your problem, then, is not to transform the path to match the SVG element, but to use the viewbox to let SVG's intrinsic scalability do this for you.

首先要做的事情是：创建你的路径，这样我们就有了一个可以使用的对象。我们现在不关心视图框是什么。

First things first: create your path so we have an object to work with. We don't care what the viewbox is at this point.

var pathStr = "...";  // The content of the path and its coordinates are completely immaterial

var path = paper.path(pathStr)
    .attr({ fill: "#000", "stroke-width": 0, "stroke-linejoin": "round", opacity: 1 });

现在我们需要做的就是使用视图框将SVG聚焦在我们的坐标空间上'对此感兴趣。

Now all we need to do is use the viewbox to "focus" the SVG on the coordinate space we're interested in.

var box = path.getBBox();    
var margin = Math.max( box.width, box.height ) * 0.1;  //  because white space always looks nice ;-)
paper.setViewBox(box.x - margin, box.y - margin, box.width + margin * 2, box.height + margin * 2);   

就是这样。 SVG（无论其大小）将从视图框中指定的内部坐标转换为屏幕上的物理坐标。

And that's it. The SVG (regardless of its size) will translate from the internal coordinates specified in the viewbox to its physical coordinates on screen.

这是你的小提琴的一个分支概念验证。

Here's a fork of your fiddle as proof-of-concept.

这篇关于Raphael路径调整大小并相对于容器移动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！