求解，非45度菱形地图怎么求点击的菱形块

Creator 2.x
#1

当菱形块的长度是高的两倍时，可以套公式来计算，点击的位置是哪个菱形块。

image.png1580×1158 253 KB

//-----

image.png1882×1406 970 KB

但如果菱形块的左边夹角为70度时，之前的公式就不能用了，这个该怎么算呢。菱形地图的 0，0在中间最上方
【此图仍是45度，为表0，0位置】

2赞
#2

哪位指点一下

#3

哪位大神给棒棒忙说说咋算吧，弄了两天了

#4

数学上就是转换坐标系，从地块原点重新建一个坐标系，转换一下坐标，可以计算任意角度的地块了

#5

坐标转换，先boundingbox检测,获取imageData，根据坐标，在imageData取对应点的alpha，如果不是0就说明点到了。

#6

通过矩阵换算可以轻松解决这个问题
将你获取到的屏幕坐标传入 applyMatrix 方法，得到的就是菱形地图对应的坐标
scale 是你地图的夹角，一般是45度，你这边是70度
angle 是地图旋转的度数，45度不要改

// 转换点矩阵
applyMatrix(point){
	// 上下压缩的角度
	const scale = 70;
	// 旋转的角度
	const angle = 45;

	// 换算弧度
	let rad = Math.PI * angle / 180;

	// 旋转矩阵
	let rotateMatrix = [
		Math.cos(rad), -Math.sin(rad),
		Math.sin(rad), Math.cos(rad)
	];

	// 缩放矩阵
	let contractMatrix = [
		1, 0,
		0, scale / 90
	];

	// 先应用旋转矩阵，再应用压缩矩阵
	return this.matrix2d(this.matrix2d(point, rotateMatrix), contractMatrix);
}

// 为点应用单个矩阵
matrix2d(vec2, mat2) {
	let x = vec2.x * mat2[0] + vec2.y * mat2[1];
	let y = vec2.x * mat2[2] + vec2.y * mat2[3];
	return new cc.Vec2(x, y);
}

点阵列应用矩阵前：

Screen Shot 2019-05-10 at 15.38.43.png752×836 4.82 KB

应用矩阵后：

Screen Shot 2019-05-10 at 15.38.57.png894×732 5.12 KB

4赞
#7

这个我服，一直搞不懂矩阵，看来有时间要研究一下

#8

大神能不能再写个菱形转世界坐标

#9

大神真的给你跪了，这个好高端

#10

菱形转屏幕也很简单，直接反向应用矩阵就可以了

// 地图坐标转屏幕坐标
mapToScreen(point) {
	// 上下压缩的角度
	const scale = 70;
	// 旋转的角度
	const angle = 45;

	// 换算弧度
	let rad = -(Math.PI * angle) / 180;

	// 旋转矩阵
	let rotateMatrix = [Math.cos(rad), -Math.sin(rad), Math.sin(rad), Math.cos(rad)];

	// 缩放矩阵
	let contractMatrix = [1, 0, 0, 1 / (scale / 90)];

	// 先应用压缩矩阵，再应用旋转矩阵
	return this.matrix2d(this.matrix2d(point, contractMatrix), rotateMatrix);
}

// 屏幕坐标转地图坐标
screenToMap(point) {
	// 上下压缩的角度
	const scale = 70;
	// 旋转的角度
	const angle = 45;

	// 换算弧度
	let rad = (Math.PI * angle) / 180;

	// 旋转矩阵
	let rotateMatrix = [Math.cos(rad), -Math.sin(rad), Math.sin(rad), Math.cos(rad)];

	// 缩放矩阵
	let contractMatrix = [1, 0, 0, scale / 90];

	// 先应用旋转矩阵，再应用压缩矩阵
	return this.matrix2d(this.matrix2d(point, rotateMatrix), contractMatrix);
}

// 为点应用单个矩阵
matrix2d(vec2, mat2) {
	let x = vec2.x * mat2[0] + vec2.y * mat2[1];
	let y = vec2.x * mat2[2] + vec2.y * mat2[3];
	return new cc.Vec2(x, y);
}
2赞
#11

马克下，有空来研究

#12

大神我给你跪了，一直很佩服算法很强的人

#13

大神，我的菱形地块是44块，这个在这里怎么写

#14

N=int(x/TileW - y/TileH)
M=int(x/TileW + y/TileH)

终于解决了，其实这个算法能行，大神提供的矩阵个人理解不了。

#15

马克下

#16

这个东西 能用白话在解释一下吗？:joy: 表示没看懂

#17

mark.
矩阵变换一下。

#18

找个矩阵变换的教程看看自然就会啦，计算机图形学基础 :grin:

#19

请问你的是瓦片地图实现的吗

#20

不是，自己写算法