0

我正在使用带有 JSON 的 Raphael，如下所示：

AvGen.svg1 = [0,0,255.3,298.5,
{type:'path',
path:'M 35.3 257.2 C 34.4 245.7 45.4 234.1 48.5 223 C 53.6 249.2',
'fill':AvGen.bodyColor,
'stroke':'none',
'stroke-width':'0',
'fill-opacity':'1',
'stroke-opacity':'0'}];

我想要的是将路径定位在 Raphael 对象内的特定位置并更改大小。

不幸的是，Raphael 文档很糟糕，我只是不知道该怎么做？

提前致谢！

4

1 回答 1

1

你熟悉Element.transform() 方法吗？处理起来可能有点棘手，但它可以为您扩展和翻译。

根据您提供的对象，您会想要这样的东西。（我随意选择了深红色作为填充颜色，因为这是您代码中的一个变量，并且出于演示目的更改了框的坐标。）

var svg = [10,30,255.3,298.5,
{type:'path',
path:'M 35.3 257.2 C 34.4 245.7 45.4 234.1 48.5 223 C 53.6 249.2',
'fill':"#900",
'stroke':'none',
'stroke-width':'0',
'fill-opacity':'1',
'stroke-opacity':'0'}];

var paper = Raphael(0, 0, 500, 500);
var frame = paper.rect(svg[0], svg[1], svg[2], svg[3]);
var line = paper.path();

for (var prop in svg[4]) if (svg[4].hasOwnProperty(prop)) {
    // if the key is a valid Raphael attribute, add it
    if (Raphael._availableAttrs.hasOwnProperty(prop)) {
        line.attr(prop, svg[4][prop]);    
    }
}

然后您可以编写一个函数来相对于框移动形状，然后对其进行缩放：

function moveShapeTo(box, shape, x, y, s) {
    console.log(shape.getBBox());
    //current upper-left corner of shape's bounding box
    var shape_xy = { x: shape.getBBox().x, y: shape.getBBox().y };

    // target location (coordinates relative to parent box)
    var target_xy = { x: box.getBBox().x + x, y: box.getBBox().y + y };    

    // how much to move the shape
    var offset = {
        x: target_xy.x - shape_xy.x,
        y: target_xy.y - shape_xy.y
    }

    shape.transform("T" + offset.x + "," + offset.y + " S" + s + "," + s + " " + target_xy.x + "," + target_xy.y);
}

moveShapeTo(box, line, 30, 50, 4);

jsfiddle

请记住，您给这个函数的坐标是指形状边界框的左上角。

于 2013-06-11T15:24:43.120 回答