个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在使用 Raphael.js 创建一个“播放”按钮图标。但是，三 Angular 形的位置太靠近圆的边缘。在鼠标悬停时，我增加了笔划宽度 - 问题是三 Angular 形实际上位于圆圈之外，这根本不是我想要的。 HTML 只是一个带有 id 的 div:
<html>
<head>
</head>
<body>
<div id="playB"></div>
</body>
</html>
javascript 相当长，所以 here is the jsfiddle
在这种情况下，“移动”SVG 路径的最简单方法是什么？即 - 从右边开始，从顶部开始。我尝试过各种方法，但除了改变图标的大小——将路径的每个数字乘以 x 之外，我根本无法操作图标。在这种情况下，移动图标的特定元素。
最佳答案
您需要拆分路径以调整三 Angular 形的位置。通过找出路径中第二个“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");
然后你可以把三 Angular 形移过去:
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');
});
如果您只想修复路径，可以使用 Raphael.mapPath() 函数来获取调整后的三 Angular 形 x/y，如下所示:
console.log(Raphael.mapPath(triangle.attr("path"), triangle.matrix));
关于javascript - 移动拉斐尔矢量图形中三 Angular 形的位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14242237/
25
4
0
您如何确定在鼠标事件上单击了哪些鼠标按钮？ 我想区分左键和右键。 最佳答案 我不确定点击事件(虽然它可能值得一试)但是如果你使用应该足够好的 mousedown 事件，那么你可以检查事件的“which
如此处所示:http://raphaeljs.com/reference.html#Element.transform Raphael 的变换允许我移动元素，但不改变元素的属性。 但正如这里所解释的:
按照 this question 的回答我正在尝试禁用默认浏览器上下文菜单并显示自定义菜单。正如您在 jsfiddle 中看到的那样，右键单击会显示矩形，但会显示默认菜单。我尝试了 Chrome 和
下面代码的目的是当鼠标悬停在蓝色或红色矩形上时显示红色矩形。请注意，红色矩形与蓝色重叠。 问题是，当鼠标悬停在红色矩形上时，它开始闪烁和/或消失，正如您在此 jsfiddle 中看到的那样 我什至为红
当您将鼠标悬停在 raphael 元素上时，我试图制作一些动画。 看这里的例子: http://jsfiddle.net/GVEqf/24/ 当您将鼠标悬停在正方形上时它会放大，当您停止悬停时它会缩小
我正在处理的对象后面有一个对象，我不想点击这个第一个元素，我想点击它下面的那个。 是否可以让 raphael 中的元素停止接收事件，但仍然保持可见？ 最佳答案 事件冒泡，所以它后面的对象仍然会收到点击
我在 Canvas 上有一堆拉斐尔圆形物体，在许多情况下它们重叠，有时一个较小的圆圈被位于其顶部的较大圆圈完全覆盖。在这种情况下，我希望当鼠标悬停在较小的圆圈上时，或者更准确地说，当鼠标悬停在它包含的
我正在使用 Raphael 来处理 SVG。而且，我想在每个路径中添加文本。我怎样才能做到这一点？这是我在 jsfiddle 上的代码. 谢谢 最佳答案 当您说在每个路径中添加文本时，您的意思是像这样
我正在使用 Raphael JS 矢量库，但我无法获得正在绘制的线条(路径)以更改颜色。希望这只是我做的蠢事。 var blue_one = paper.path ("M205 205L300 300
很快我将不得不制作一个 JS 浏览器应用程序，为此我需要使用一些图形库来绘制一些对象/形状(正方形、圆形……没有不规则的)。我需要能够应用“纹理”(理解为:为形状设置背景图像)并处理事件(单击和拖动)
我一直在努力解决以下问题。 我有一个元素，我想用一张图片填充它。 Raphael 在其默认设置下使用图案，从而重复图像。 我找到了 http://xn--dahlstrm-t4a.net/svg/ra
我正在使用 Raphael js 在客户端创建一些图形。但我现在希望能够直接在服务器上做同样的事情，以便能够创建它们并批量存储它们。 我找到了从客户端获取 SVG 形式 Raphael 的解决方案，但
有谁知道在使用 Raphael 时如何根据文本相对于另一个对象的位置更改文本的外观？ 我创建了一个 JS fiddle 来演示我的意思(链接如下)。 在这个例子中有一个橙色的矩形和一些部分重叠的文本。
我已经从 Illustrator 图像创建了 SVG 文件。我正在使用这个:https://github.com/wout/raphael-svg-import导入并显示矢量图像。 我以文本形式读取
我正在关注 netuts 的关于 raphael js 的教程，但我不明白其中一个示例，有人可以用更简单的英语向我解释一下吗？我知道我应该首先了解更多关于 javascript 的知识。 for(va
我创建了一个圆，我可以在圆的圆周上选择两个点。 我想填充这两点之间的部分。 Demo 如果你看到演示，我想填充两点之间的 Angular 。 JS: (function (Raphael) {
如何像逐渐绘制一样为矢量路径设置动画？换句话说，逐像素缓慢显示路径。 我正在使用 Raphaël.js，但是如果您的答案不是特定于库的——比如可能有一些通用的编程模式来做那种事情(我'我是矢量动画的新
我一直在与 Raphael 合作在 Canvas 上创建拖放形状。我使用 .drag() 函数(Raphael 框架中提供)以及我的事件函数来执行此操作。我这样做没有任何问题。 我还有一个创建新形状的
是否有任何选项可以避免 Raphaël 中条形图之间的空格？ 有一个选项可以管理栏空间，不幸的是gutter选项会影响栏的宽度。遗憾的是我没有足够的积分来上传图片:( 这是我的代码 var effic
您好，在此先感谢您的帮助。为了这个，我整天都在敲键盘，需要一些帮助。我对 JavaScript 和 Raphael 还很陌生，所以希望这不是很明显的东西 - 但我花了很多时间谷歌搜索、检查文档，并在这
我是一名优秀的程序员,十分优秀！