草庐IT

svg-animate

全部标签

javascript - 你将如何创建一个 JQuery/svg 单击拖动选择轮廓效果?

不确定确切地调用它是什么,但我正在寻找一种方法来通过javascript/svg创建虚线轮廓/选择框效果,当您单击并拖动到一个区域上时,然后在mouseUp上消失(可能是如果不是原始部件,则添加)。如果有jQuery库就好了。我环顾四周,但没有找到我要找的东西。我想理论应该是从第一次点击开始获取坐标,跟踪鼠标坐标时刻并相应地调整框。但不从头开始编写它会很好。 最佳答案 这是我专为您制作的演示:)演示(静态):http://jsfiddle.net/HNH2f/1/演示(动画):http://jsfiddle.net/HNH2f/2/

javascript - 从浏览器中仅打印 SVG

我正在开发一个网页,该网页将根据用户交互动态呈现SVG图形。完成后,我希望用户能够只打印图形-而不是简单地打印他们所在的网页和SVG,而只是打印SVG。此外,理想情况下,打印版本的绘制方式与屏幕浏览器版本略有不同。当前的浏览器和SVG可以实现这种事情吗?在Java中,我可以为我的应用程序绘图例程提供绘图引擎或打印引擎,这可以简单地处理相同的问题。然而,我是SVG的新手,我无法确定是否存在某种类似的机制。 最佳答案 您可以使用jQuery。假设您的svg位于网页的DIV(svgDiv)中,包含一个调用以下内容的打印按钮,其中根svg具

javascript - PanResponder 在第二次拖动时将 Animated.View 捕捉回原始位置

我创建了一个PanResponder来垂直移动Animated.View。当我将它从原来的位置移开时,它工作正常,但一旦我第二次移动它,它就会弹回到原来的位置,然后相对于触摸移动。我将响应程序直接解包到Animated.View中,这会不会以某种方式导致此行为?这是我定义PanResponder的方式:this.state={drag:newAnimated.ValueXY()}this._responder=PanResponder.create({onStartShouldSetPanResponder:()=>true,onPanResponderMove:Animated.ev

javascript - 可以使 jQuery 的 .animate() 方法影响变量而不是 CSS 属性吗?

我开始编写一些JS代码,通过某种形式的“缓入”使变量值随时间增加,直至达到目标值。我意识到jquery已经在它的.animate()方法中做到了这一点。当然,该方法是用于操作CSS属性,而不是一般变量。我的问题是,有没有什么办法可以破解它,使该方法影响一个变量,而不是CSS属性? 最佳答案 是的,您可以为变量设置动画。Demohere$({n:0}).animate({n:10},{duration:1000,step:function(now,fx){$("div").append(now+"");}});在这个例子中,我在1秒内

javascript - SVG/VML 浏览器兼容性表

我有兴趣找到一个浏览器兼容性表,该表列出了每个版本的Opera、Safari、Chrome、Firefox和InternetExplorer(Konqueror也不错)支持的SVG/VML部分,与Quirksmode类似。.我找到了以下两个SVG兼容性表,但它们都没有提供足够的详细信息:http://caniuse.com/#cats=SVG&statuses=rechttp://www.codedread.com/svg-support.php第一个链接中的信息似乎与Raphael等库冲突它声称完全支持Firefox3.0+和Safari3.0+中的动画,而链接表明动画模块直到这两个

javascript - Chrome 在简单地添加和删除 SVG 元素时会泄漏内存

继续这个问题:Taskmanagershowsmemoryleak,butHeapsnapshotdoesn't我设法创建了一个非常简单的例子来说明这个漏洞,这里是完整的源代码:svgtestvarsvg;varinterval;varsvg;window.onload=function(){createSVG();start();}functionstart(){interval=setInterval(createElements,100);}functioncreateSVG(){vardiv=document.getElementById("svgdiv");div.inner

javascript - 三个JS——如何在Animation中设置当前时间

我在ThreeJS中使用蒙皮/骨骼动画。我有一个动画,我希望能够在其中前后移动,并跳转到其中的不同位置,而不是通常的循环行为。动画是这样创建的,如示例:varanimation=newTHREE.Animation(mesh,geometry.animation.name);我试过使用负增量更新动画,以及直接设置animation.currentTime:animation.currentTime=animationLocation;这些似乎只有在我及时向前移动时才有效,但如果我向后移动,动画就会中断并且出现错误:THREE.Animation.update:Warning!Scale

javascript - 使用 SVG 和 d3.js 创建滚动条

现在我已经使用d3创建了几个“框”,它们只是带有文本的SVG矩形:varcanvas=d3.select("body").append("svg").attr("width",800).attr("height",500);//specifiesdrawingareaforeachboxvarboxes=canvas.selectAll("rect").data(classData).enter();boxes.append("rect").attr("width",boxWidth).attr("height",boxHeight).attr("fill",boxColor).att

javascript - 使用基于 JavaScript 的 SVG 库在表头内垂直文本

我将jqGrid与许多包含bool信息的列一起使用,这些信息在表格内显示为复选框(参见http://www.ok-soft-gmbh.com/VerticalHeaders/TestFixedO.htm作为示例)。为了更紧凑地显示信息,我使用垂直列标题。它工作得很好,在所有浏览器的jqGrid中工作(请参阅我在jqGrid论坛中与TonyTomov的讨论http://www.trirand.com/blog/?page_id=393/feature-request/headers-with-vertical-orientation/),但在IE中垂直文本模糊并且看起来不够好(在IE中打

javascript - Chrome 不会在 SVG 中缓存图像

我刚刚发现,如果SVG中的cache-controlheader设置为no-cache,Chrome不会缓存放置在SVG中的图像。Firefox和IE10似乎忽略了这个设置。我创建了一个带有静态SVG的小测试页:HTML:Javascript:$(document).ready(function(){varcurXPos=80;//Localtestfunctionwhichrepresentsomeservercallsinmy"reallife"scenario//Justupdatesthex-positioninthetransformmatrixinthistestcasef