改变路径的位置和大小
Change position and size of path
我使用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对象内的特定位置以及更改大小。
不幸的是,拉斐尔的文档是可怕的,我只是不知道该怎么做?
提前感谢!
熟悉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
请记住,您给这个函数的坐标指向形状边界框的左上角。
相关文章:
- 创建从一个位置到另一个位置的路径动画
- 更改文件字段内显示的路径的位置
- 在 SVG 动画中围绕舞台原点以外的其他位置旋转路径
- 在 AngularJS 中按路径位置获取控制器
- 将路径添加到当前 URL 位置
- 如何在 Ext JS 网格列中打开共享路径文件位置
- 从 GPS 捕捉到道路的 GEO 位置绘制路径
- 设置d3中多边形和路径的位置
- 如何在D3.js中添加到地理位置的链接(创建为json路径)
- 为什么我的路径位置在paper.js中没有定义
- 确定拉斐尔路径上一个点的位置
- Raphael JS:IE中缩放路径后的错误位置
- 将粘贴文件从共享路径复制到桌面.并从粘贴的位置打开相同的
- 量角器检查位置路径
- Snap.svg沿着一条路径拖动一个组并保存位置
- 重新定义window.console函数时,请保留原始路径位置
- 美元的位置.路径相同的url不起作用
- 指定的位置.路径在angularjs中
- 不能在angular JS中更改位置路径
- AngularJS美元的位置.路径循环回到根