草庐IT

Android和播放SVG动画

全部标签

javascript - OpenLayers3 - 动画 .fit 到特定范围

我使用OpenLayers3创建了一张map。我可以使用以下代码成功缩放到map上的图层:map.getView().fit(extent,map.getSize());但是我想要以动画方式呈现的类似内容。我知道以下动画:ol.animation.panol.animation.zoom通过使用这些我无法缩放到图层,使用ol.animation.pan我只能平移到一个点(而不是边界框)并使用ol.animation.zoom我可以缩放到一个分辨率(和而不是边界框)。所以我正在寻找的是一个动画.fit,这样我就可以将动画缩放到一定程度。任何关于我如何实现的建议将不胜感激:)

javascript - 如何从填充的 SVG 路径中删除形状

我有这个fiddle:https://jsfiddle.net/thatOneGuy/1spn8nne/1/这有两条路径,目前,它们只是矩形,但实际上是复杂的形状。我使用此代码创建了两个带有“孔”的矩形:createRects(dataPointsPath2,'blue');createHoles(dataPointsCircle2);createRects(dataPointsPath1,'red');createHoles(dataPointsCircle1);我需要的是从填充路径中移除孔,以便您可以看到它后面的矩形。如何从填充路径中删除形状(圆形)?编辑我刚刚意识到,剪辑路径可能

javascript - 中文文本使用 Web Speech API 播放一次,但不会播放第二次

所以我正在使用修改后的脚本来尝试播放来自WebSpeechAPI的一些文本。代码原来在这里:ChromeSpeechSynthesiswithlongertexts这是我修改后的变体:functiongoogleSpeech(text,rate){if(!reading){speechSynthesis.cancel();if(timer){clearInterval(timer);}letmsg=newSpeechSynthesisUtterance();letvoices=window.speechSynthesis.getVoices();msg.voice=voices[63]

javascript - 如何添加点击并拖动以缩放 SVG 中的图像?

我想让访问者使用点击和拖动来缩放图像:是否有可以帮助我的JavaScript库?我注意到Raphaelhasclickanddrag方法,但我仍然需要编写大量JS来:找到图像的Angular使Angular落附近的区域可选为Angular绘制图标,使其明显可见在Angular落添加点击、拖放更新图片的尺寸我可以做到所有这些,但听起来很费时。有没有我应该使用的开源脚本?其他建议? 最佳答案 我在这篇文章中找到了这个解决方案:DraggablesandResizablesinSVG.在答案中,您可以找到一个jsfiddle链接:http

javascript - SVG - 如何将 <path> 切成两半?

我需要在javascript中的特定点切割现有路径(曲线)。例如,如果我有以下路径:据此,我可以这样得到中点:varline=document.getElementById("line_test");varlength=line.getTotalLength();varmidpoint=line.getPointAtLength(length/2);一旦我得到那个中点,我想完全删除路径的其余部分。有没有一个函数可以让我得到一个子路径?绘图库对我来说不是一个真正的选择。 最佳答案 是的,它叫做getPathSegAtLength(在路

javascript - 在 Firefox 中渲染内联 SVG

我有一个我正在开发的网站,我们允许创建形状,我们使用通过javascript构建的内联svg来创建形状。我遇到了一个奇怪的问题,svg在Chrome中正确呈现,但在Firefox中它切掉了一部分SVG。下面的代码是一个星号。在chrome中,这完美地显示出来。在Firefox中,我只能看到图像左上角的25%左右。我不确定是我们做错了什么还是Firefox有问题。有趣的是,如果我将星星变小(比如这个星星大小的1/4),它会在Firefox中完美呈现。感谢您的帮助! 最佳答案 您需要在中添加width和height属性元素。width=

java - Android PhoneGap 1.7 调用 javascript 函数

好的,所以我需要介绍一些背景知识。首先,我将jquery-mobile与PhoneGap1.7一起使用。我编写了一个使用ServerSocket对象的非常简单的Java服务器。在Android手机上,我连接到服务器,然后服务器通过套接字发送数据。这部分正在运行。我坚持的部分是我打算通过该套接字发送数据,这将需要在接收到数据时更新jquery移动UI。答案:西蒙帮了大忙,我在他的帮助下解决了这个问题,并关注了thistutorial真正打动我的部分是在PhoneGap插件本身中生成线程。一旦我意识到这一点,一切都水到渠成。但是,对于任何感兴趣的人来说,这里是代码。请记住,我从教程中学到了

javascript - 获取以屏幕像素为单位的旋转 SVG 元素的边界?

我正在尝试找到以屏幕像素为单位获取任意SVG元素边界框的最佳方法,以便正确覆盖HTML元素。到目前为止,我的方法是使用.getBBox()和.getCTM()检索对象的边界框和变换矩阵,然后将变换应用于边界框点如thisquestion的已接受答案中所述.//gettheelementvarel=$(selector)[0],pt=$(selector).closest('svg')[0].createSVGPoint();//gettheboundingboxandmatrixvarbbox=el.getBBox(),matrix=el.getScreenCTM();pt.x=bbo

javascript - 通过声音振幅动画对象?

我知道可以通过Actionscript为对象设置声音动画。我真的希望也可以使用JavaScript为对象设置动画,因为它们非常相似。或许可以使用jQuery或HTML5来完成。我只是希望找到一种在Flash之外实现它的方法。有人知道这些格式中的任何一种是否可行吗?我做了很多研究,但似乎找不到任何形式或教程表明它可能或不可行。p>基本上,我正在尝试实现与我在Actionscript中编码相同的效果,但我希望使用另一种语言对其进行编码,这样也无法看到FlashView。这是Flash示例:http://beaubird.com/presentation.php这是一个使用ActionScr

javascript - d3.js 处理非 svg 浏览器

按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭9年前。d3.js开发人员如何处理无法呈现svg的浏览器?我很好奇,因为InternetExplorer9、8、7等在世界大部分关键地区拥有巨大的多数市场份额,但似乎有如此活跃的d3.js社区,就好像InternetExplorer不存在一样。D3的目的是提供灵活的数据驱动图表,因此能够以直观的方式可视化复杂的主题。因此,瞄准最时尚的技术场景并假装其他人也从他们的