标签: 2d

Javascript 2d数组indexOf

我有一个像这样的二维数组:

var arr = [[2,3],[5,8],[1,1],[0,9],[5,7]];
Run Code Online (Sandbox Code Playgroud)

每个索引都存储一个包含某个元素坐标的内部数组.

如何使用Array.indexOf()来检查新生成的坐标集是否已包含在中arrarr如果只有坐标不重复,我想进入.

这是我的尝试不起作用:

if (arr.indexOf([x, y]) == -1) {
    arr.push([x, y]);
}
Run Code Online (Sandbox Code Playgroud)

它似乎indexOf()不适用于2D阵列......

javascript arrays 2d indexof

23
推荐指数
2
解决办法
5万
查看次数

烘焙转换为SVG路径元素命令

tl; dr summary:给我资源或帮助修复下面的代码<path>,用任意矩阵转换SVG 元素的路径命令.

详细信息:
我正在编写一个库,将任意SVG形状转换为<path>元素.当transform="..."层次结构中没有元素时,我可以使用它,但现在我想将对象的局部变换烘焙到路径数据命令本身.

在处理简单的moveto/lineto命令时,这主要是工作(下面的代码).但是,我不确定转换贝塞尔手柄或arcTo参数的适当方法.

例如,我可以将这个圆角矩形转换为<path>:

<rect x="10" y="30" rx="10" ry="20" width="80" height="70" />
--> <path d=?"M20,30 L80,30 A10,20,0,0,1,90,50 L90,80 A10,20,0,0,1,80,100
             L20,100 A10,20,0,0,1,10,80 L10,50 A10,20,0,0,1,20,30" />
Run Code Online (Sandbox Code Playgroud)

在没有任何圆角的情况下进行转换时,我得到了有效的结果:

<rect x="10" y="30" width="80" height="70"
      transform="translate(-200,0) scale(1.5) rotate(50)" />
--> <path d=?"M10,30 L90,30 L90,100 L10,100 L10,30" />
Run Code Online (Sandbox Code Playgroud)

但是,仅转换椭圆弧命令的x/y坐标会产生有趣的结果: 圆形矩形,绿色斑点从边界外的角落渗出
虚线是实际变换后的矩形,绿色填充是我的路径.

以下是我到目前为止的代码(略微减少).我还有一个测试页面,我正在测试各种形状.请帮助我确定如何在elliptical arc给定任意变换矩阵的情况下正确转换各种其他贝塞尔曲线命令.

function flattenToPaths(el,transform,svg){
  if (!svg) svg=el; while(svg && svg.tagName!='svg') svg=svg.parentNode;
  var …
Run Code Online (Sandbox Code Playgroud)

javascript svg 2d transform

22
推荐指数
3
解决办法
1万
查看次数

2d游戏:通过预测射弹和单位的交叉点来射击移动目标

好的,这一切都发生在一个漂亮而简单的2D世界...... :)

假设我在位置Apos处有一个静态物体A,在Bpos处有一个带有bVelocity的线性移动物体B,以及一个带有速度Avelocity的弹药轮......

考虑到B的线速度和A弹药的速度,我如何找出A必须射击的角度,击中B?

现在目标是在物体的当前位置,这意味着当我的射弹到达那里时,该单位已经转移到更安全的位置:)

2d intersection predict

21
推荐指数
4
解决办法
2万
查看次数

通过MPI发送和接收2D阵列

我想解决的问题如下:

我已经在大型2D矩阵中计算了C++序列码.为了优化这个过程,我希望拆分这个大的2D矩阵并使用MPI在4个节点上运行.节点之间发生的唯一通信是在每个时间步的末尾共享边缘值.每个节点与其邻居共享边缘阵列数据A [i] [j].

根据有关MPI的阅读,我有以下方案要实施.

if (myrank == 0)
{
 for (i= 0 to x)
 for (y= 0 to y)
 {
  C++ CODE IMPLEMENTATION 
  .... 
  MPI_SEND(A[x][0], A[x][1], A[x][2], Destination= 1.....)
  MPI_RECEIVE(B[0][0], B[0][1]......Sender = 1.....)
  MPI_BARRIER
}

if (myrank == 1)
{
for (i = x+1 to xx)
for (y = 0 to y)
{
 C++ CODE IMPLEMENTATION
 ....
 MPI_SEND(B[x][0], B[x][1], B[x][2], Destination= 0.....)
 MPI_RECEIVE(A[0][0], A[0][1]......Sender = 1.....)
 MPI BARRIER
}
Run Code Online (Sandbox Code Playgroud)

我想知道我的方法是否正确,并且也希望其他MPI函数的任何指导也可以用于实现.

谢谢,阿什温.

c++ 2d mpi multidimensional-array

21
推荐指数
1
解决办法
4万
查看次数

2D图形库(请不要XNA)

由于微软正在放弃XNA(是的,我知道人们仍然可以非常成功地使用它,但事实上它只是在很短的一段时间后才开发出来的事实说明了这一点).什么是最简单的2D开发的C#图形库(类似于Allegro,SFML,SDL等)?在最好的情况下,我的意思是那些正在积极发展的人,有一个活跃的社区,并希望有一些体面的教程.

我试着寻找答案但是,不管怎么说,它总是出现的XNA(可能是有原因的......)

谢谢!

c# graphics 2d

21
推荐指数
1
解决办法
3万
查看次数

如何制作流畅的摄像机跟踪算法?

我正在用LibGDX(Java)制作游戏.

我需要相机跟随一个快速移动的角色.最简单的方法是写这个:

this.getCamera().position.set(obj.x, obj.y, 0);
Run Code Online (Sandbox Code Playgroud)

但是,有没有算法使这更顺利?就像相机不是那么严格,而且总是有点迟了:角色走得很快,相机跟着稍微延迟,或者如果你突然出现在远处,相机不会瞬间传送,但是当它以最快速度传送给你时越来越近,它慢慢减速并再次找到你.

是否有任何libgdx libs可以做到这一点或任何人有这种经验?

java opengl 2d smooth-scrolling libgdx

20
推荐指数
2
解决办法
1万
查看次数

在Android Canvas上包装长文本

我有一个自定义控件,直接进行了大量的2D绘图canvas.

一些图纸是文字,所以我使用的Canvas.drawText()方法.

我想在一些边界内绘制文本 - 左上角,某个最大宽度和最大行数.在绘制文本后,我想知道它花了多少行.

是否有内置函数在边界内绘制文本进行明智的分割?

如果没有,是否有这样做的标准配方?

android 2d canvas

19
推荐指数
1
解决办法
1万
查看次数

将高度图映射到基于网格的轮廓格式

我有以下格式的2D高度图

06 36 39 42 43 55 ... 
37 40 43 43 45 46 ...
40 43 44 45 46 48 ...
44 44 46 47 48 50 ...
41 44 45 47 48 48 ...
...
Run Code Online (Sandbox Code Playgroud)

我需要将其重新映射为基于grin的轮廓格式(因此它可以进一步映射到精灵)

. . . . | . . 
. . . . \ . . 
. . . / / . . 
. . . | . . . 
. . . | . . . 
. / - / . . . …
Run Code Online (Sandbox Code Playgroud)

2d terrain contour heightmap

19
推荐指数
1
解决办法
1268
查看次数

构建一个简单的HTML5 /画布2D游戏.建议使用游戏引擎?

我想通过构建一个简单的2D游戏开始学习HTML5与canvas.我想构建一个看起来像这样的:http://www.youtube.com/watch?v = h4SgiVCPfPk

您是否建议我可以使用任何框架或游戏引擎来执行此操作?

html5 2d game-engine

19
推荐指数
2
解决办法
2万
查看次数

OpenGL中的2D绘图:线性过滤,具有原始大小的像素精度

精简版:

OpenGL中是否有一种通用的方法,当以原生大小(包括边缘像素)绘制时,允许从图集中完美地2D绘制纹理,并在过滤到非原生大小时进行高质量缩放?

关于这个问题的更多细节:

假设您正在编写某种用于从纹理图集中绘制精灵的系统,以便用户可以指定精灵,以及绘制精灵的大小和位置.另外,他们可能只想绘制精灵的子矩形.

例如,这是一个64x64棋盘:

棋盘

......并且单独在其纹理图集中:

纹理图集中的棋盘格

注意:我们假设视口设置为将1:1映射到设备像素.

途径

为清晰起见进行编辑:请注意,下面的前两个方法没有给出所需的结果,并且专门用于概述不起作用的内容.

1.要以原生大小绘制精灵,只需使用GL_NEAREST即可

  • 设置OpenGL以使用GL_NEAREST min/mag过滤
  • 在位置(x,y)处绘制,将顶点从(x,y)放置到(x + 64,y + 64)
  • 使用纹理坐标(0,0) - >(64/atlas_size,64/atlas_size)

这适用于以原始大小绘制,但是当用户以64x64以外的大小绘制对象时,NEAREST过滤会产生较差的结果.它还会强制纹理像素与像素网格对齐,在非整数像素位置绘制对象时效果不佳:

用像素偏移量为0.25的gl_nearest绘制 用像素偏移量为0.5的gl_nearest绘制

2.启用GL_LINEAR

  • 使用线性滤波,我们需要将uv坐标移动到纹素的中心:(0.5/atlas_size,0.5/atlas_size)to (63.5/atlas_size,63.5/atlas_size).否则,对于最外面的像素,线性过滤将对图集中的精灵的邻居进行采样.
  • 然后我们还需要修改我们的顶点,因为继续使用从(0,0)到(64,64)的顶点会在两个方向上将纹理拉伸1px,如下所示:

用uv coords绘制的光线移动了0.5个纹素,导致拉伸

  • 因此,我们需要使用从(0.5,0.5)到(63.5,63.5)的顶点.通常,当纹理以其原始大小(a,b)的比例绘制时,我们需要将我们的顶点"向内"移动,我相信(a/2,b/2).给出以下结果(在紫色背景上):

用uv移动0.5个像素,顶点移动0.5个像素

请注意,除了与背景混合的边缘像素之外,我们得到像素精确的绘图,因为顶点边界落在像素之间的中间.

编辑:还要注意,此行为还取决于是否启用了抗锯齿功能.如果不是,前一种方法实际上确实提供像素完美渲染,但是当精灵从像素对齐移动到子像素位置时不提供良好的转换.在许多情况下,加抗锯齿是必须的.

3.在纹理图集中填充精灵

边缘像素问题的两个明显的解决方案涉及在纹理图集中用1px边框填充精灵的边缘.你可以:

  • 填充1层透明像素,并将顶点扩展(0.5a,0.5b)而不是缩小它们
  • 使用精灵最外面像素的第二个副本填充,然后返回从(0,0)到(64/atlas_size,64/atlas_size)的纹理采样

这基本上为我们提供了线性缩放的像素精确绘图.但是,如果我们允许用户只绘制精灵的子矩形,则这些方法中的任何一个都会失败,因为子矩阵显然没有所需的填充.

我错过了什么吗?这个问题有一般的解决方案吗?

opengl 2d

18
推荐指数
1
解决办法
3788
查看次数