草庐IT

javascript - 通过一组 N 个点绘制一条曲线,其中 N>2

我需要使用Javascript通过N>2的N个点平滑地绘制一条曲线。我目前在html5Canvas对象中使用bezierCurveTo()。我投入了大量时间来寻找实现此目的的最佳方法,虽然Catmull-RomSplines听起来很有前途,但我不知道有什么方法可以将它们绘制成线条。因此,我只剩下Poly-lineBézier曲线,需要找到所有中间控制点。我花了很多时间重新学习数学,但我有一个部分可用的例子here。这条线有时不是特别平滑,而且我的控制点对于某些矢量是关闭的问题。Here是我最初的math.stackexchange问题,我要求它获得控制点的大部分数学。我也愿意使用Cat

javascript - 重新创建 CSS3 过渡 Cubic-Bezier 曲线

在CSS3过渡中,您可以将计时函数指定为'cubic-bezier:(0.25,0.3,0.8,1.0)'在该字符串中,您只需为曲线上的点P1和P2指定XY,因为P0和P3始终分别为(0.0,0.0)和(1.0,1.0)。根据Apple的网站:x[is]表示为总持续时间的分数,y表示为总变化的分数我的问题是如何将其映射回javascript中的传统一维T值?--FromAppledocsonanimatingwithtransitions 最佳答案 稍微浏览一下webkit-source,以下代码将为CSS3过渡中使用的隐式曲线提供

javascript - 将贝塞尔曲线分成相等的两半

我有两点之间的贝塞尔曲线。我想将所有曲线切成相等的两半。我的一个想法是,如果我可以控制“t”值,我将通过t=[0,0.5]和t=[0.5,1]绘制2条曲线,但我不知道如何。下面是我的代码。我不会介意任何其他想法或建议D3testvarOver=function(){d3.select(this).style("stroke-opacity",0.25);}varOut=function(){d3.select(this).transition().duration(200).style("stroke-opacity",0);}functioncurve(n,x1,y1,x2,y2){

javascript - 如何找到贝塞尔曲线的中点?

我想制作一条“命名”贝塞尔曲线。我希望它是一个单词命名的,这样我就不必担心自动换行。我通过P5bezier(sx,sy,c1x,c1y,c2x,c2y,ex,ey)函数制作贝塞尔曲线,我希望在贝塞尔曲线的中间显示一个字符串。但我不知道如何找到曲线的“中间”。现在我的结果是这样的(我不知道从哪里开始解决这个问题,所以我采用了更简单的方法,即在曲线的起点打印文本):但我希望它看起来像这样:这意味着我需要P1和P2坐标:抱歉绘画,但我还没有我的代码。一拿到手,我就会把它添加到这里。下面是绘制曲线的代码:letb=dest.inTriangle.middle,//destinationtria

javascript - 多个圆圈 -> 一个多边形?

使用GoogleMapsAPIv3,我能够在我的map上创建多个google.maps.Circle对象。但是,我现在需要以某种方式“连接”它们。我有以下带有多个圆圈的map:我现在需要让它看起来像这样:(来源:pcwp.com)我在Internet上到处寻找解决方案,但无济于事。有什么想法吗? 最佳答案 您可能需要考虑通过以x间隔添加额外的圆来解决这个问题,并增加路径每个点之间的半径。这将非常容易实现,并且适用于旋风分离器的任何方向。显然Matti'ssuggestedsolution通过连接所有切线来创建多边形会更准确,但您可以

javascript - html二次曲线上的中心点

我使用context.quadraticCurveTo(controlX,controlY,endX,endY);在htmlCanvas上绘制了一条二次曲线。我有控制点和起点和终点,它们在水平方向上不一定彼此齐平。如何使用这些参数找到曲线的中心点?其实我想在这个中心点上放一个div标签。这个过程有没有解方程? 最佳答案 quadraticCurveTo绘制一个quadraticBéziercurve.计算曲线上任意给定位置(从0到1)点坐标的公式为x(t)=(1-t)^2*x1+2*(1-t)*t*x2+t^2*x3y(t)=(1-

javascript - Html5 Canvas Bezier 上的虚线曲线

对于我的一个应用程序,我需要在Html5Canvas中的贝塞尔曲线路径上绘制虚线曲线...破折号的长度和中间的间隙应该是可变的...它可以在JavaFx中实现,seethislink...我想使用Html5Canvas实现相同的效果。我知道如何绘制直线虚线,但不知道如何沿着贝塞尔曲线绘制曲线...虽然我不是专家,但我知道bezierdrawingalgorithm,我看到这个算法的问题是,它允许您使用范围从0到1的时间参数来识别贝塞尔曲线上的坐标...这还不够,因为要绘制虚线贝塞尔曲线,我需要在主要贝塞尔曲线路径上绘制许多具有指定长度参数和给定间隙距离的小贝塞尔曲线。JavaFx必须使

javascript - 如何计算避开物体的贝塞尔曲线控制点?

具体来说,我正在使用javascript在Canvas上工作。基本上,我的对象有我想避免的边界,但仍然用贝塞尔曲线环绕。但是,我什至不确定从哪里开始编写一个可以移动控制点以避免碰撞的算法。问题在下图中,即使你不熟悉乐谱,问题应该还是很清楚的。曲线的点是红点此外,我可以访问每个音符的边界框,其中包括词干。所以自然地,必须在边界框和曲线之间检测到碰撞(这里有一些方向会很好,但我一直在浏览,发现有很多关于这方面的信息)。但是在检测到碰撞后会发生什么?计算控制点位置以使某些东西看起来更像: 最佳答案 贝塞尔方法最初,这个问题是一个广泛的问题

javascript - 给定 x 立方贝塞尔曲线的 y 坐标

这个问题非常类似于:Quadraticbeziercurve:YcoordinateforagivenX?.但是这个是立方体的...我正在使用getBezier函数计算贝塞尔曲线的Y坐标。贝塞尔曲线总是从(0,0)开始,总是在(1,1)结束。我知道X值,所以我尝试将其作为百分比插入(我是个白痴)。但这显然行不通。你能提供一个解决方案吗?这是必要的,它是一个白痴证明功能。喜欢:functionyFromX(c2x,c2y,c3x,c3y){//c1=(0,0)andc4=(1,1),domainc2anddomainc3=[0,1]//yourmagicreturny;}

c# - 将贝塞尔曲线段或线的端点绑定(bind)到 WPF 中的其他形状?

我正在尝试创建类似于UDK或MayaMaterial编辑器的东西http://www.google.com/search?q=udk+material+editor&oe=utf-8&rls=org.mozilla:en-US:official&client=firefox-a&um=1&ie=UTF-8&hl=en&tbm=isch&source=og&sa=N&tab=wi&biw=1144&bih=929通过单击一个连接并将其拖动到另一个连接,可以连接两个节点。WPF可以执行此操作,但我不知道如何以编程方式(使用C#,而不是XAML)绑定(bind)贝塞尔曲线的端点和控制点以跟随