问题标签 [isometric]

我正在使用 HTML5 游戏引擎 LimeJS，并希望为等距地图集成一个 jQuery 插件。我将教程脚本添加到一个简单的 LimeJS 程序中，LimeJS 和 jQuery 之间似乎存在冲突。两者在页面上看起来都很好，但是当 jQuery 包含在标题中时，Lime 脚本会失去所有交互性。

Iso 地图插件教程：http ://www.pixel2life.com/publish/tutorials/1298/browsergames_creating_a_basic_isometric_map/page-1/

我的文件目录（查看 HTML 文件的来源 - 石灰未安装在服务器上，因此无法运行）： http: //notlaura.com/limefiles/

提前致谢

我是 HTML5 Canvas 和 JavaScript 的新手，但是有没有一种简单的方法可以在 HTML5 Canvas 元素中进行等距投影？

我的意思是真正的等距投影 - http://en.wikipedia.org/wiki/Isometric_projection

谢谢大家的回复。

我正在尝试来自glacialflame.com的教程（很棒的教程如何在 HTML5 Canvas 中创建等距图形！）

现在我有了这个：http: //jsfiddle.net/fUm6n/3/

在此示例中是带有对象的等轴测图。瓦片宽度为 50，高度为 25，对象与瓦片大小相同（对象只能在一个瓦片中绘制）。我将如何创建另一种类型的对象，其宽度为 200，高度为 100，并绘制 4 个图块？我会创建另一个对象Array并设置这个数组的大小，还是有更好的方法来做到这一点？

好吧，我束手无策。我正在尝试创建一个比屏幕更大的小的等距平铺地图，我可以通过鼠标拖动来修改视点。我画对了（我认为），我得到了拖动工作，只是似乎无法正确选择鼠标。到目前为止，我已经做到了几乎正确的瓷砖，但它偏离了大约一半的瓷砖尺寸，我找不到弥补偏移的方法。

这是代码：

我在 click 方法中有一些公式我试过了，但它们不起作用（x 和 y 轴以这种方式倒置，还没有试图找出原因）。如果有人能指出我正在犯的错误，我将不胜感激。

我正在尝试在 HTML5 Canvas 中创建 Isometric，但不知道如何将 HTML5 Canvas 屏幕坐标转换为 Isometric 坐标。我现在的代码是：

我得到了 Canvas 坐标。但是如何将此坐标转换为等轴测坐标？如果我喜欢使用 16x16 瓷砖。

感谢大家对这个问题的回复，并对我的英语感到抱歉。

我有一个等距网格系统，其坐标从网格左角的 [0,0] 开始（上图中显示的角），x 向图像底部递增，y 向顶部递增（所以 [ 0, height] 将是顶角，[width, 0] 将是菱形的底角，宽度和高度是网格的大小，即 200 x 200 正方形）

无论如何，我需要帮助的是获得一组等距网格位置，这些位置包含在图像中显示的蓝色框中。没有遍历每个 x,y 屏幕位置并获得相应的网格位置（请参阅我之前提出的关于如何从屏幕位置转换为网格位置获取等距网格上的行/列的问题。）我不确定如何有效地实现这一目标。

我之前发现的一个问题与此处的链接几乎完全相同。答案是将网格渲染为每个网格正方形具有不同颜色的图像，然后检测正方形下方存在哪些颜色，我已经实现了这个解决方案，但是速度很慢！我几乎在想检查选择框中每个像素的网格位置会更快。为什么哦，为什么 javascript 循环这么慢！

我真的需要基于我的坐标系来解决这个问题的数学解决方案，但我似乎无法想出一些可行的方法（并且也可以处理脱离网格的选择框）

如果您需要更多信息，请告诉我。

编辑：不幸的是，提供的答案到目前为止还没有奏效，因为选择就像在方形网格上选择了一个菱形区域，除非我错过了答案的要点，否则真的没有左上角，右下角可以迭代？我已经优化了渲染方法，但是在大量选择中，它仍然会增加明显的帧数，因为它会循环遍历所有像素检查颜色并获得相应的正方形

<canvas id="canvas" width="640" height="480"></canvas>我在 HTML5 Canvas ( )中有一个示例。这是 JavaScript 代码（JSFiddle 链接）：

这个例子可以渲染等距平铺和等距物体，但我只能在一个平铺上绘制物体（例如，我不能在 4 个平铺上绘制物体）。如何在多个图块中绘制等距对象？类似这个对象的东西（在我的代码中，它存储在一个名为 table 的变量中）：

在这种情况下，我认为图像胜于雄辩。

我想得到这个效果：

但我能用 CSS3 做的最好的事情是：

而这方面的代码绝对是可怕的：

有什么方法可以用纯 CSS3 创建这样的效果吗？我不介意它是 3D 的，但是等距是首选。

我不需要将内容放在盒子的侧面，只需放在前面，所以我只使用一个<div>元素。

这是我到目前为止所拥有的：http: //jsfiddle.net/X7xSf/3/

任何帮助，将不胜感激！

我正在构建一个等距地图，就像Christian Weber所做的那样。

我有与他几乎相同的代码，但构建地图的 JS 函数永远不会被调用。应该是这样，因为我$('div#map').gameMap({map:[[{"tile":"grass_0","object":""},...在$(document).ready(function() {}他的演示源代码中也有类似的东西。

这是一个展示我尝试的 JSFiddle：http: //jsfiddle.net/briz/RWgge/6/

我只需要一张地图，它不需要像代码中给出的那么大，但是为了尝试使地图正常工作，我将其保留为与他提供的相同的大地图。

有人能理解为什么我的gameMapfunc 没有被调用吗？

我正在尝试为Java 上的游戏制作等距地图，但我找不到这样做的方法。我需要为JLabel等轴测图的每个多边形添加一个，以便可以paint()用于每个位置。如何JLabel为我绘制的每个多边形添加一个？我无法得到它。我已经有了绘制等轴测图每个位置的算法，如下所示：

非常感谢你们