在拉斐尔矢量图形中移动三角形的位置答案

【问题标题】：Moving the position of triangle in a Raphael vector graphic在拉斐尔矢量图形中移动三角形的位置
【发布时间】：2023-03-10 17:00:02
【问题描述】：

我正在使用 Raphael.js 创建一个“播放”按钮图标。但是，三角形的位置太靠近圆的边缘。在鼠标悬停时，我正在增加笔划宽度 - 问题是三角形实际上位于圆圈之外，这根本不是我想要的。 HTML 只是一个带有 id 的 div：

<html>
 <head>
 </head>
 <body>
  <div id="playB"></div>
 </body>
</html>

javascript 比较长，所以here is the jsfiddle

在这种情况下，“移动”SVG 路径的最简单方法是什么？即 - 从右侧开始，从顶部开始。我尝试了各种方法，但除了更改图标的大小 - 将路径的每个数字乘以 x 之外，我根本无法操作图标。在这种情况下，移动图标的特定元素。

【问题讨论】：

标签： javascript svg raphael vector-graphics

【解决方案1】：

您需要分割路径以调整三角形的位置。通过找出第二个“M”在路径中的位置，我能够通过肉眼做到这一点：

var playB = Raphael('playB', 200, 200);
var circle =          playB.path("M64,5.864C31.892,5.864,5.864,31.892,5.864,64c0,32.108,26.028,58.136,58.136,58.136c32.108,0,58.136-26.028,58.136-58.136C122.136,31.892,96.108,5.864,64,5.864z");
var triangle =  playB.path("M26.736,102.728L97.264,62L26.736,21.272V102.728z");

然后你可以把三角形移过来：

triangle.attr("transform", "T15,0");

要保持属性和动画不变，请将两者都添加到 Raphael 集：

var playBP = playB.set();
playBP.push(circle, triangle);
playBP.attr({
  'stroke-width': 5,
  'stroke': "#000",
  'fill': "#fff",
  'opacity': 1
});

那么你只需要一个小改动：将鼠标悬停命令中的“this”改为“playBP”。这似乎是多余的，但“this”指的是鼠标悬停的单个元素，而不是集合。

var speed = 5;

playBP.mouseover(function(){
  playBP.animate({
    'stroke-width': 10,
    'stroke': "#fff",
    'fill': "#000",
    'opacity': .9
  }, 1000, 'elastic');

});
playBP.mouseout(function(){
  playBP.stop().animate({
    'stroke-width': 5,
    'stroke': "#000",
    'fill': "#fff",
    'opacity': 1    
  }, speed*4, 'elastic');

});

jsFiddle updated

如果您只想修复路径，可以使用 Raphael.mapPath() 函数来获取调整后的三角形 x/y，如下所示：

console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));

【讨论】：

请问triangle.matrix是什么？一个例子？

【解决方案2】：

我采取了简单的方法并改变了您在 inkscape 中的路径。这很容易做到。如果你有兴趣，这就是我所做的。

在 inkscape 中创建路径并选择它。
Ctrl-shift-x 启动 xml 编辑器。应该选择您的路径。
点击“d”属性。
在下面的框中，将值替换为您的小提琴中的值。
点击设置。
路径将被修改为类似于您在小提琴中的路径。

然后我只是选择了三角形节点并将它们移动了过去。返回 xml 编辑器，选择“d”值，然后将其放入您的小提琴中。

var playBP =          playB.path("M 64,5.864 C 31.892,5.864 5.864,31.892 5.864,
64 5.864,96.108 31.892,122.136 64,122.136 96.108,122.136 122.136,96.108 122.136,
64 122.136,31.892 96.108,5.864 64,5.864 z M 38.640816,102.728 109.16882,
62 38.640816,21.272 z");

Voila.

【讨论】：

【解决方案3】：

使用el.transform('t{x},{y}')，例如el.transform('t1,1') 将任何元素向右和向下平移1 个像素。您可以根据需要为 x 和 y 替换不同的值，包括负值。

【讨论】：

这不起作用，因为三角形和圆形是同一路径的一部分。