关于 javascript:HTML5 Canvas: 分割/计算线条

codeneng 2023-03-28 原文

HTML5 Canvas: Splitting/Calculating Lines

我已经在键盘上敲了大约一个星期，但我无法为我的问题找到合适的解决方案。我认为它比 HTML Canvas 更与数学相关......希望有人能指出我正确的方向。

我有一个 HTML 画布，用户可以在其中使用鼠标和非常简单的 moveTo() 和 lineTo() 函数绘制线条。用户完成后，我将坐标保存在 MongoDB 中。当用户稍后再次点击该页面时，我想显示他的绘图但我不想一次加载具有所有存储坐标的整个图片，我想将它以图块的形式返回(通过缓存每个图块来获得更好的性能)。

图块为 200x200 像素(固定偏移和宽度，从 0 -> 200-> 400 ->...开始)。
现在，当用户从 50,50(x/y) 到 250,250(x/y) 画一条线时，每个边界框(平铺)中只有一个点。我需要分割线并计算每个边界框(图块)中每条线的起点和终点。否则我无法部分绘制图像(在瓷砖中)。当一条线穿过多个边界框(图块)时，它会变得更加复杂。例如：100,100 (x/y) -> -1234,-300 (x/y)。
线条可以从任意点 (/-) 到任意方向任意距离。

当然，我查看了 Bresenham 的旧算法，它确实有效 - 部分有效，但对我来说，它似乎是最长且最耗费资源的解决方案。

所以，我在这里的原因是我希望有人可以用(也许)另一种计算每个边界框的线的起点/终点的方法将我指向正确的方向。

代码示例在 JavaScript 或 PHP 中非常受欢迎。

感谢您的阅读和思考 :)

tl;dr：使用飞机，数学解释如下。底部有一个画布示例。

鉴于您的所有单元格都是轴对齐的边界框，您可以使用平面方程来找到您的线与边缘的交点。

飞机

你可以把你的盒子想象成一组四个几何平面。每个平面都有一个法线或长度为 1 的向量，指示哪个方向是平面的"前"。构成细胞侧面的平面的法线是：

1
2
3
4

top = {x: 0, y: -1};
bottom = {x: 0, y: 1};
left = {x: -1, y: 0};
right = {x: 1, y: 0};

给定平面上的一点，平面有方程：

1	distance = (normal.x * point.x) + (normal.y * point.y)

你可以使用这个方程来计算平面的距离。在这种情况下，您知道框的左上角(假设 x 为 10，y 为 100)在顶平面上，因此您可以这样做：

1 2	distance = (0 * 10) + (-1 * 100) distance = -100

根据平面检查点

一旦你有了距离，你就可以重新使用方程来检查任何点相对于平面的位置。对于随机点 p(其中 x 为 -50，y 为 90)，您可以执行以下操作：

1
2
3
4
5

result = (normal.x * p.x) + (normal.y * p.y) - distance
result = (0 * -50) + (-1 * 90) - (-100)
result = 0 + (-90) - (-100)
result = -90 + 100
result = 10

有两种可能的结果：

1
2
3
4
5
6

if (result >= 0) {
// point is in front of the plane, or coplanar.
// zero means it is coplanar, but we don't need to distinguish.
} else {
// point is behind the plane
}

对照平面检查一条线

您可以通过这种方式检查从 a 到 b 的线的两个端点：

1 2	result1 = (normal.x * a.x) + (normal.y * a.y) - distance result2 = (normal.x * b.x) + (normal.y * b.y) - distance

有四种可能的结果：

1
2
3
4
5
6
7
8
9

if (result1 >= 0 && result2 >= 0) {
// the line is completely in front of the plane
} else if (result1 < 0 && result2 < 0) {
// the line is completely behind the plane
} else if (result1 >= 0 && result2 < 0) {
// a is in front, but b is behind, line is entering the plane
} else if (result1 < 0 && result2 >= 0) {
// a is behind, but b is in front, line is exiting the plane
}

当直线与平面相交时，您要找到交点。用矢量术语来思考一条线会很有帮助：

1	a + t * (b - a)

如果t == 0，你在行首，t == 1 是行尾。在这种情况下，您可以将交点计算为：

1	time = result1 / (result1 - result2)

而交点为：

1 2	hit.x = a.x + (b.x - a.x) * time hit.y = a.y + (b.y - a.y) * time

对照方框检查一条线

通过该数学运算，您可以计算出与您的框相交的线。您只需要针对每个平面测试线的端点，并找到时间的最小值和最大值。

因为你的盒子是一个凸多边形，所以这个检查有一个早期的结果：如果这条线完全在你盒子里的任何一个平面的前面，它就不能与你的盒子相交。您可以跳过检查其余飞机。

在 JavaScript 中，您的结果可能如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

/**
* Find the points where a line intersects a box.
*
* @param a Start point for the line.
* @param b End point for the line.
* @param tl Top left of the box.
* @param br Bottom right of the box.
* @return Object {nearTime, farTime, nearHit, farHit}, or false.
*/
function intersectLineBox(a, b, tl, br) {
var nearestTime = -Infinity;
var furthestTime = Infinity;
var planes = [
{nx: 0, ny: -1, dist: -tl.y}, // top
{nx: 0, ny: 1, dist: br.y}, // bottom
{nx: -1, ny: 0, dist: -tl.x}, // left
{nx: 1, ny: 0, dist: br.x} // right
];
for (var i = 0; i < 4; ++i) {
var plane = planes[i];
var nearDist = (plane.nx * a.x + plane.ny * a.y) - plane.dist;
var farDist = (plane.nx * b.x + plane.ny * b.y) - plane.dist;
if (nearDist >= 0 && farDist >= 0) {
// both are in front of the plane, line doesn't hit box
return false;
} else if (nearDist < 0 && farDist < 0) {
// both are behind the plane
continue;
} else {
var time = nearDist / (nearDist - farDist);
if (nearDist >= farDist) {
// entering the plane
if (time > nearestTime) {
nearestTime = time;
}
} else {
// exiting the plane
if (time < furthestTime) {
furthestTime = time;
}
}
}
}
if (furthestTime < nearestTime) {
return false;
}
return {
nearTime: nearestTime,
farTime: furthestTime,
nearHit: {
x: a.x + (b.x - a.x) * nearestTime,
y: a.y + (b.y - a.y) * nearestTime
},
farHit: {
x: a.x + (b.x - a.x) * furthestTime,
y: a.y + (b.y - a.y) * furthestTime
}
};
}

如果这仍然太慢，您还可以通过将世界划分为大矩形并为这些矩形分配线来进行广泛相位剔除。如果您的线和单元格不在同一个矩形中，它们就不会发生冲突。

我已经上传了一个画布示例。

这看起来你必须弄清楚每条线在什么点与每个图块的边界相交。

查看这个问题的答案：是否有一种简单的方法来检测线段交叉点？

答案不提供代码，但将方程式转换为 PHP 或 Javascript 应该不会太难...

编辑：

为什么，确切地说，你想分割线？我了解您不想一次加载所有行，因为这可能需要一段时间。但是，只加载和绘制前几行，然后再绘制其余部分有什么问题？

我认为这比切割每一行以适应特定的图块要简单得多。平铺是优化位图加载的好方法；我不认为它非常适合基于矢量的绘图。

您也可以考虑发送一个 Ajax 请求，并在收到请求时开始绘制整个内容；这不会干扰页面的加载。

我在服务器端渲染图像并将它们作为 PNG 文件返回。这样我就可以缓存所有预先呈现在服务器上的文件中并缓存在客户端上。我不想使用客户端(浏览器)重新渲染画布中的所有内容，因为它可能会变得巨大，有数百万行。
在那种情况下，在服务器上绘制整个东西然后保存部分PNG不是更方便吗？还是首先画布会太大？

线条 javascript span class br canvas html lines

有关关于 javascript:HTML5 Canvas: 分割/计算线条的更多相关文章

ruby - 使用 ruby 将 HTML 转换为纯文本并维护结构/格式 - 2
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。最佳答案首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
ruby-on-rails - 使用一系列等级计算字母等级 - 2
这里是Ruby新手。完成一些练习后碰壁了。练习:计算一系列成绩的字母等级创建一个方法get_grade来接受测试分数数组。数组中的每个分数应介于0和100之间，其中100是最大分数。计算平均分并将字母等级作为字符串返回，即“A”、“B”、“C”、“D”、“E”或“F”。我一直返回错误:avg.rb:1:syntaxerror,unexpectedtLBRACK,expecting')'defget_grade([100,90,80])^avg.rb:1:syntaxerror,unexpected')',expecting$end这是我目前所拥有的。我想坚持使用下面的方法或.join，
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
ruby-on-rails - Ruby url 到 html 链接转换 - 2
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2
我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。最佳答案这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda
ruby - 如何计算 Liquid 中的变量 +1 - 2
我对如何计算通过{%assignvar=0%}赋值的变量加一完全感到困惑。这应该是最简单的任务。到目前为止，这是我尝试过的:{%assignamount=0%}{%forvariantinproduct.variants%}{%assignamount=amount+1%}{%endfor%}Amount:{{amount}}结果总是0。也许我忽略了一些明显的东西。也许有更好的方法。我想要存档的只是获取运行的迭代次数。最佳答案因为{{incrementamount}}将输出您的变量值并且不会影响{%assign%}定义的变量，我
ruby - 使用 Ruby，计算 n x m 数组的每一列中有多少个 true 的简单方法是什么？ - 2
给定一个nxmbool数组:[[true,true,false],[false,true,true],[false,true,true]]有什么简单的方法可以返回“该列中有多少个true？”结果应该是[1,3,2] 最佳答案使用转置得到一个数组，其中每个子数组代表一列，然后将每一列映射到其中的true数:arr.transpose.map{|subarr|subarr.count(true)}这是一个带有inject的版本，应该在1.8.6上运行，没有任何依赖:arr.transpose.map{|subarr|subarr.in

关于 javascript:HTML5 Canvas: 分割/计算线条

HTML5 Canvas: Splitting/Calculating Lines

有关关于 javascript:HTML5 Canvas: 分割/计算线条的更多相关文章

随机推荐