我有两点之间的贝塞尔曲线。我想将所有曲线切成相等的两半。 我的一个想法是,如果我可以控制“t”值,我将通过 t = [0,0.5] 和 t = [0.5,1] 绘制 2 条曲线,但我不知道如何。下面是我的代码。我不会介意任何其他想法或建议
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>D3 test</title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var Over = function(){
d3.select(this)
.style("stroke-opacity", 0.25);
}
var Out = function(){
d3.select(this)
.transition().duration(200)
.style("stroke-opacity", 0);
}
function curve(n,x1,y1,x2,y2){
var xr = (x1+x2)/2,
yr = (y1+y2)/2,
euDist = Math.sqrt(Math.pow(x2-x1,2)+Math.pow(y2-y1,2)),
x3 = -y1+xr+yr, x4 = -y2+xr+yr,
y3 = x1+yr-xr, y4 = x2+yr-xr,
ctrl , curveDescription;
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0.25)
.attr('d', 'M'+x3+','+y3+'L'+x4+','+y4)
.attr('stroke-width',strokeWidth);
for(var j=0;j<=n;j++){
ctrl = [(x4-x3)*j/n+x3 , (y4-y3)*j/n+y3] ,
curveDescription=
'M' +x1+',' +y1+
'Q' +ctrl[0]+','+ctrl[1]+','
+x2+',' +y2;
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0.25)
.attr('d', curveDescription)
.attr('stroke-width',strokeWidth);
svg.append('path')
.attr("stroke", 'blue')
.attr('fill','none')
.style("stroke-opacity",0)
.on("mouseover", Over)
.on("mouseout", Out)
.attr('d', curveDescription)
.attr('stroke-width',strokeWidth*25);
}
}
</script>
</head>
<body>
<script>
var w = 1268 , h = 680 , strokeWidth = 2;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
curve(5, 100,100, 400,500);
</script>
</body>
</html>
最佳答案
将贝塞尔曲线分成两条曲线相当简单。查看 De Casteljau 的算法。 https://en.wikipedia.org/wiki/De_Casteljau%27s_algorithm
更新
De Casteljau 比看起来要简单。对于非数学家来说,那篇 WP 文章可能更清楚。所以我会更简单地解释。
假设您有一个由点 A、B、C 和 D 定义的贝塞尔曲线。其中 A 和 D 是端点,B 和 C 是控制点。
因此,假设您想沿着曲线找到点“t”处的曲线值(其中 t 在范围 0..1 内。您可以通过几何方法这样做:
沿着直线 CD 找到在“t”处的点 G。
找到沿直线 EF 在 't' 处的点 H。
沿着直线 FG 找到在 't' 处的点 J。
最后,沿着直线HJ找到在't'处的点K。
K 也等于贝塞尔曲线上的“t”点。这是 De Casteljau 的算法。
但有用的是,它还为我们提供了如果曲线在点 K 处被分割会产生的两个贝塞尔曲线的控制点。这两个贝塞尔曲线是:A、E、H、K 和 K、J、G、D .
在您的情况下,t=0.5,因此找到这两条曲线只是一系列加法和除以 2。
E = (A+B)/2
F = (B+C)/2
G = (C+D)/2
H = (E+F)/2
J = (F+G)/2
K = (H+J)/2
显然,这些计算中的每一个都必须针对 x 和 y 进行。
希望这对您有所帮助。
关于javascript - 将贝塞尔曲线分成相等的两半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18655135/
我有一个围绕一些对象的包装类,我想将这些对象用作散列中的键。包装对象和解包装对象应映射到相同的键。一个简单的例子是这样的:classAattr_reader:xdefinitialize(inner)@inner=innerenddefx;@inner.x;enddef==(other)@inner.x==other.xendenda=A.new(o)#oisjustanyobjectthatallowso.xb=A.new(o)h={a=>5}ph[a]#5ph[b]#nil,shouldbe5ph[o]#nil,shouldbe5我试过==、===、eq?并散列所有无济于事。
根据ActiveRecord::Base的文档:==(comparison_object)Returnstrueifcomparison_objectisthesameexactobject,orcomparison_objectisofthesametypeandselfhasanIDanditisequaltocomparison_object.id.Notethatnewrecordsaredifferentfromanyotherrecordbydefinition,unlesstheotherrecordisthereceiveritself.Besides,ifyoufet
我遇到了一个非常奇怪的问题,我很难解决。在我看来,我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时,我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性,其中包括href和data-method。再次单击此链接后,我的服务器收到了对新href的请求,但使用的是旧的data-method,即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是,如果我刷新页面,HTML与"new"HTML相同(随返回的JS发生变化),但它实际上发送了正确的请求类型。这就是这个问题令我困惑的
我有这个:AccountSummary我想单击该链接,但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan
我在使用Ruby代码时遇到了一些“问题”。我想检查数组的所有元素是否相等。例如,假设我有一个只有5的数组:arr=[5,5,5,5,5]我知道我可以做类似的事情arr[0]==arr[1]==arr[2]==arr[3]#==arr[4]==...但这对于巨大的数组来说是不可能的,而且在我看来也不是很像Ruby。我们可以通过做这样的事情来改进它:defall_equal?(arr)foriin0..(arr.size-2)ifarr[i]!=arr[i+1]thenreturnfalseendendtrueend但我也认为这很丑陋。那么是否有任何内置/更好/更短(更像Ruby风格)的方
我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的? 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map,但任何事情都可能发生)首先要知道的是,这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文
我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中,html表单使用tinymce将“content”列设置为textarea字段。在首页,因为使用了tinymce,post.html.erb的代码需要用这样的原始方法来实现。.好的,现在如果我关闭浏览器javascript,这个文本区域可以在没有tinymce的情况下输入,也许用户会输入任何xss,比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中,但sanitize方法将相互过滤tinymce样式。例如
抱歉,如果重复(我没找到)这只是为了确认Ruby的运算符==始终执行相等比较。IE。a==b将a的值与b的值进行比较,而不是像Java那样比较它们是否指向内存中的同一个对象(对于后者,在Ruby中,您应该使用a.object_id==b.object_id).因此,在Ruby中将字符串值与==进行比较是安全的(而在Java中这样做并不安全)谢谢编辑:问题在于任何Ruby对象的默认==行为,因为它会误导Java-C-C++程序员假设a==b比较引用本身,而不是引用内容。无论如何,你可以检查这段代码,使用字符串one="hello"two="he"two编辑2。所以,在Ruby中,比较a=
出于某种原因,我必须为Firefox禁用javascript(手动,我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点? 最佳答案 是的,这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=
我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序,我想将其转换为Ruby/Watir,因为我现在必须支持Firefox。我发现我真的很喜欢Ruby,而且我正在研究Watir,但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面,实际上是一个表单,只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click