Raphael JS 中的弧线动画在 Chrome 中摆动

2023-12-11

我在动画中看到恼人的摆动,我已经删除了包含实际动画的代码:

var side = 400;
var paper = new Raphael($(this), 100, side);

paper.customAttributes.arc = function (xloc, yloc, value, total, R) {


                var alpha = 360 / total * value,
                    a = (90 - alpha) * Math.PI / 180,
                    x = xloc + R * Math.cos(a),
                    y = yloc - R * Math.sin(a),
                    path;
                if (total == value) {
                    path = [
                        ["M", xloc, yloc - R],
                        ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
                    ];
                } else {
                    path = [
                        ["M", xloc, yloc - R],
                        ["A", R, R, 0, +(alpha > 180), 1, x, y]
                    ];
                }
                return {
                    path: path
                };
            };

            var arcWidth = 180 - 120;
            var strokeRadius = (120 + arcWidth/2);

            var indicatorArc = paper.path().attr({
                "stroke": "#4B6384",
                "stroke-width": 100,
                arc: [side/2, side/2, 0, 100, strokeRadius]
            });

            indicatorArc.animate({
                arc: [side/2, side/2, 75, 100, strokeRadius]
            }, 1500, "<>", function(){
                // anim complete here
            });

我把它放在 jsfiddle 中供你自己查看,请检查 firefox 和 chrome,你会注意到在 chrome 中边缘大幅摆动,我能做些什么来消除这种情况吗?

在这里摆弄:运行多次


所以我知道这个问题已经有两年多了,但如果有人遇到这个问题,这是 Chrome 2D 绘图引擎中的一个已知错误。

https://code.google.com/p/skia/issues/detail?id=2769

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Raphael JS 中的弧线动画在 Chrome 中摆动 的相关文章

  • SVG 路径字符串上的布尔运算

    我遇到了一个概念上的困难问题 简而言之 我需要找到通过不同布尔运算组合的两个向量路径的向量路径 例如并 差 交 减 如果我能像 Canvas 的 globalCompositeOperation 那样进行操作 那就太好了 我到底该怎么做呢
  • 如何检查某物是否是拉斐尔物品?

    给定一个 JavaScript 对象 我如何检查它是否是 Raphael 对象 不是纸张 而是圆 路径等 Raphael el代表通用元素原型 我想我想测试一下 x proto Raphael el 以跨浏览器的方式 但我不完全确定 详细说
  • Raphael-拖放时检测重叠元素

    我试图通过拖放另一个元素来获取元素 例如 我有 2 个圆圈 c1 和 c2 我想要做的是 如果我将 c2 放在 c1 之上 因此它们重叠 并非完全必要 我可以得到圆圈 c1 例如 id 标题 等 http jsfiddle net Tome
  • 如何为svg提供响应式设计?

    我是拉斐尔的新手 我在div里面写了svg标签 请参阅此示例http jsfiddle net dhana36 bvs6P 1 使用 CTRL 和 CTRL 你会发现区别 HTML div class outer div
  • Raphael 路径调整大小并相对于容器移动

    我正在尝试缩放 移动使用 Raphael api 创建的 SVG 路径 我希望路径能够整齐地适合容器 无论容器有多大 我已经搜索了参考资料 网络 但我仍然在努力让它发挥作用 如果有人能告诉我为什么这不起作用 我会很高兴 这个小提琴向你展示了
  • 如何在jquery对象上调用raphael方法?

    我正在使用拉斐尔创建一些圆圈 当用户单击按钮时 我想为这些圆圈设置动画 通过增加其半径 我该怎么做呢 例如 这是我的示例代码
  • VML 转 PNG/PDF (jsp)

    我已经使用 raphael js 在 Internet Explorer 8 中绘制了我的流程图 现在我想将我的绘图导出为图像文件 我找到了一些答案 但仍然困惑该怎么办 有人可以帮助我解决这个问题吗 示例代码会很棒 导出为 PNG 或 PD
  • Bootstrap 轮播与 morris.js 图表冲突?

    我正在使用 morris js 绘制图表 并且我想通过引导轮播显示这些图表 但是如果我这样做 Firefox 将停止响应 它们单独工作可以很好 但如果放在一起就会崩溃 firebug 告诉我有一些与 Raphael 图书馆有关的事情 但我仍
  • 拉斐尔正在添加“dy”属性

    我正在使用 raphael 创建图像及其生成的 SVGfor paper text adds a
  • Raphael 中的委托拖动功能

    使用 Raphael 我希望能够拖动包含文本对象的形状 下例中的椭圆 拖动形状或文本 我希望通过设置传递给文本元素的函数来做到这一点drag 委托给关联形状的方法 尝试使用更加多态的方法来另一个 https stackoverflow co
  • 使用 raphael 缩放多条路径

    我正在尝试使用 Raphael 创建一个与此类似的地图工具example http raphaeljs com australia html在网页中 我有一个我想要使用的地图的 svg 文件 并且省份在文件中都是单独的路径 但是 如果我将
  • 使用 javascript 以编程方式创建 SVG 图像元素

    就像我的标题所说 我正在尝试使用 JavaScript 在 HTML 页面中以编程方式创建 SVG 图像元素 由于某种原因 我的基本 javascript 代码无法正常工作 但是如果我使用 raphaeljs 库 它就可以正常工作 所以我的
  • raphaeljs 中的线宽

    在SVG或raphaeljs中用1px粗细制作线条是真的吗 下面的代码 var p Paper path M1 1 L50 1 p attr stroke D7D7D7 p attr stroke width 1 p attr opacit
  • 如何组合 Raphael javascript 库中的对象?

    抱歉问了一个很长的问题 但是就这样吧 我正在尝试修改此处演示周围的拖动形状 http raphaeljs com graffle html http raphaeljs com graffle html 该演示运行良好 我想做的是将文字放入
  • 如何使用 Raphael.JS 根据鼠标移动绘制一条线

    我试图随着鼠标在纸上移动画一条线 我只知道如何使用画线path 但想知道是否有人有想法来画一条线mousemove 请帮我解决这个问题 这是使用 raphael 的此类示例的链接 与拉斐尔一起绘画 图片来源 Jonas http irunm
  • 通过 Fabric.js 推送 D3.js 输出以支持 IE8?

    我正在评估Fabric js http fabricjs com 作为替代拉斐尔 js http raphaeljs com 用于创建与 IE8 兼容的交互式可视化 IE8 不支持 SVG 或画布 不幸的是 IE8 支持是不可协商的 Rap
  • SVG 中三角形的圆角

    我正在尝试制作一个具有圆角的三角形 三角形将如下所示 左下角是唯一看起来相当容易制作的角 主要是因为这是一个 90 度的 转弯 该转弯是使用QSVG 中的命令具有以下参数 Q x y height x y height RADIUS从我正在
  • 更改 RaphaelJS 中的文本

    如何更改 RaphaelJS 创建的文本节点中的文本 首先 我使用 Raphael 创建一个带有文本字符串的新元素 稍后我想更改此文本 如果我这样做的话对我来说会更容易not必须重新初始化该元素 因为将附加大量属性 重新创建会很痛苦 有没有
  • SVG 元素出现在 DOM 中但在屏幕上不可见

    我尝试使用 SVG 绘制五线谱Vexflow http www vexflow com and 拉斐尔 js http raphaeljs com当我加载页面时 SVG 元素出现在 DOM 中 但它们不会出现在屏幕上 我检查了是否有任何 C
  • For 循环不适用于 JavaScript 动画

    我正在尝试编写一个 for 循环 以在单击形状按钮时重复 爆炸 路径的动画 但 for 循环无法工作 执行 而且我看不出哪里出了问题 for循环的目的 循环动画路径的过程 然后将动画反转回其原始路径 我知道问题出在 for 循环中的某个地方

随机推荐

  • std::remove 不起作用

    我的测试程序的目标是擦除简单字符串向量中的单元格 如下所示 程序失败 分段错误 static void display std vector
  • 如何使用 PuPHPet 制作 Sequel Pro?

    我刚刚使用 Vagrant 和 Puphpet 设置了一个虚拟机 我知道我有 MySQL 因为我可以mysql在命令行中 我刚刚进行了基本安装 我不知道如何设置我的续集专业版才能访问 我在 Sequel Pro 应用程序上使用 标准 选项
  • Nestjs 到 Azure Windows 应用程序服务 - web.config 设置

    从昨天开始 我一直在尝试将 Nestjs api 部署到 azure 但没有成功 起初 我试图将其推送到 Linux 云服务计划 并能够从 vs code 部署它 在 azure 日志中看到该应用程序已成功启动 但它不会从我的端点返回任何数
  • 迭代简短的固定字符串列表[关闭]

    Closed 这个问题是基于意见的 目前不接受答案 在 C 中迭代简短的文字字符串列表 其中所有元素都是预先知道的 的最有效 优雅 惯用的方法是什么 可以用向量来完成 for auto color std vector
  • 如何以编程方式为 UIButton 提供光泽外观?

    我想为某些 iPhone UIButtons 添加 3D 或光泽外观 但这样做时不使用 PNG 或可拉伸图像 我有很多不同形状和大小的按钮 其中有很多颜色是动态生成的 因此预渲染图像在我的情况下不可行 您将如何以编程方式在这些按钮上绘制光泽
  • 在 catch 处理程序中打印异常回溯的可靠方法?

    我想在我的 C 程序中启用异常的完整日志记录 我想做的就是在 seh catch handler 中捕获软件 硬件异常 然后打印异常的完整回溯 我主要对异常的起源感兴趣 调用堆栈对我来说就足够了 try difficult task exc
  • 如何使用 UIScrollView 实现 UIPageViewController?

    我拿了照片滚动来自苹果网站的示例 并尝试通过复制代码来实现我自己的专辑 现在UIScrollView不可见 我该如何让它出现 我所做的唯一代码更改是创建UIPageViewController 就我而言 这是一个UIViewControll
  • 退出时保存应用程序数据状态

    我有一个包含 24 个字符串的 NSMutableArray 如果用户接到电话或退出应用程序 我需要保存这些数据 我一直在研究很多例子 但由于某种原因似乎无法确定保存数据的最佳方法 24 个字符串对应 24 个按钮及其状态 单击按钮时 它会
  • 在 Sencha Touch 2 中从商店加载轮播?

    有没有人有一个代码示例 可以从商店 在我的例子中是 JSON 商店 加载 Sencha Touch 2 Carousel 组件 我了解如何加载扩展 DataView 的列表 但 Carousel 似乎是一个更难解决的问题 因为它不扩展 Da
  • C# 中 AppDomain 的使用

    C 中 AppDomains 最重要的用途是什么 The 最重要的一个使用的是你的代码必须有一个 即您用 C 编写的所有内容都在AppDomain 这非常重要 p 如果你的意思是额外的应用程序域 当使用插件和其他不受信任的代码时 它允许您隔
  • 是否可以将 html get 请求从 create-react-app 代理到 /graphql ?

    我有一个 create react app 应用程序 在其中通过添加以下内容来启用代理 proxy http localhost 3001 到我的 package json 这对于对 graphql 的 API 请求效果很好 但是当 Web
  • CodeIgniter 未加载页面

    我有一个使用 codeigniter 开发的 Web 应用程序 它在我以前的服务器中运行良好 现在我更改了我的服务器 当我尝试运行该 Web 应用程序时 除了空白屏幕之外什么也没有 当我尝试打开现有链接时http mydomain com
  • 是否有用于创建茎叶图的 pandas 函数

    有没有相当于R的pandasstem 用于为数字创建茎叶图的函数Series 我可以轻松编写一些代码 但想知道我是否错过了精美手册中的某些内容 输出示例 16 070355555588 18 000022233333335577777777
  • java 将字符串月份转换为整数

    如何将月份字符串转换为整数 在单击方法中 我想显示所选的日期 但如果该日期有事件 它应该显示有关该事件的更多信息 检查假期事件的方法需要整数值 这是代码 UPDATED Override public void onClick View v
  • 我如何使用 awk 打印多个分隔符单词? [关闭]

    Closed 这个问题需要调试细节 目前不接受答案 我有一个带有正则表达式分隔符的 awk 我需要提取名字和姓氏的单词 但是这个命令不起作用 awk v OFS t v FS firstName lastName sum 1 2 print
  • 将 Uint8List 转换为文件

    我正在使用图像选择器网络 效果很好 我可以在中显示图像Image memory 但是此图像的格式为 Uintlist8 为了保存在存储需要格式File 我的问题是如何将图像保存在Firebase 存储 网页图像选择器 class Secon
  • 如何生成列表的所有排列?

    如何生成列表的所有排列 例如 permutations permutations 1 1 permutations 1 2 1 2 2 1 permutations 1 2 3 1 2 3 1 3 2 2 1 3 2 3 1 3 1 2 3
  • 按下按钮时的动画文本转换

    我有 3 种类型的报价 当按下相应的按钮时 如果从类别 1 到类别 2 再到类别 3 则报价会消失 反之亦然 然而 我想让引用消失 即使它们来自同一类别 现在 当引用来自不同类别时 它就会消失 如何才能做到这一点 谢谢 我认为这与按钮有关
  • Rust impl 具有私有字段的默认特征

    当我进行此类设置时 我收到错误 默认 测试 rs mod default mod use default mod Point fn main let p1 Point new let p2 Point Point z 1 Default d
  • Raphael JS 中的弧线动画在 Chrome 中摆动

    我在动画中看到恼人的摆动 我已经删除了包含实际动画的代码 var side 400 var paper new Raphael this 100 side paper customAttributes arc function xloc y