如何在画布上的网格上的两点之间绘制平铺墙?



我正在使用Pixijs引擎创建一个模拟器。

我有一个功能,用于使用鼠标绘制墙壁。但我似乎做不好。这可能更像是一个数学问题,而不是编程。

无论如何,它应该像这样工作:

  • 用户单击方形磁贴(设置起始位置)
  • Pixi 的 Tink 库返回刚刚单击的 (x,y) 位置 相对于画布
  • 用户单击第二个方块(在同一行或同一列中)和 设置目标点

请看一下这个小提琴。 https://jsfiddle.net/ensf32e0/18/

我可以让它从左到右,从上到下画。但是从右到左,从下到上让我失望。 我正在使用一个带有布尔值的对象来跟踪用户是放下起始位置还是结束位置。我不确定这是一个好的实现。

let wallsObj={
start:{
x:0,
y:0,
done:false
},
end:{
x:1,
y:1,
done:false
}
};

drawTile绘制单个瓷砖,drawWallLine是有问题的函数。它采用开始和结束位置,并在它们之间绘制一条平铺线:

function drawWallLine (obj,size) {
// Determine whether line is to be drawn horizontally or vertically
// if abs(x2-x1) is larger than abs(y2-y1) then horizontal else vertical
// assign len the the actual length of line
let len = Math.abs(obj.end.x - obj.start.x) > Math.abs(obj.end.y - obj.start.y)
? obj.end.x - obj.start.x
: obj.end.y - obj.start.y;
console.log('drawWallLine', len);
// same as above. If direction is horizontal, mx = 1 and my = 0 and vice versa
// this to be used to determine the polarity of size
let mx = Math.abs(obj.end.x - obj.start.x) > Math.abs(obj.end.y - obj.start.y) ? 1 : 0;
let my = Math.abs(obj.end.x - obj.start.x) < Math.abs(obj.end.y - obj.start.y) ? 1 : 0;
console.log("mx, my", mx, my);
// Get polarity of size. +size is going down or right while -size is going up or left
if (mx === 1) {
size = obj.end.x - obj.start.x >= 0 ? size : size * -1;
}
if (my === 1) {
size = obj.end.y- obj.start.y >= 0 ? size : size * -1;
}
console.log('size', size);
// If going down or right then 
if (size >=0 ) {
for (let i = 0; i < Math.abs(len); i+=size) {
drawTile({
len: rs,
x: obj.start.x - obj.start.x%rs - .5 + i * mx,
y: obj.start.y - obj.start.y%rs - .5 + i * my,
line:{
width:1,
color:0xC2C2C2,
alpha:1
},
fill:{
color:0xFFFFFF,
alpha:1
}
});
}
} else { // if going up or left
for (let i = Math.abs(len); i > 0; i+=size) {
drawTile({
len: rs,
x: obj.start.x - obj.start.x%rs - .5 + i * mx,
y: obj.start.y - obj.start.y%rs - .5 + i * my,
line:{
width:1,
color:0xC2C2C2,
alpha:1
},
fill:{
color:0xFFFFFF,
alpha:1
}
});
}
}
}

这是我第一次做这样的事情,所以请耐心等待。我觉得有一个明显的解决方案,但我没有看到它。

好吧,一个简单的解决方法就是确保开始 x/y 始终低于结束 x/y 值。所以我在drawWallLine函数的开头添加了以下代码:

function drawWallLine (obj, size) {
if(obj.start.x > obj.end.x){
var temp = obj.start.x;
obj.start.x = obj.end.x;
obj.end.x = temp;
}
if(obj.start.y > obj.end.y){
var temp = obj.start.y;
obj.start.y = obj.end.y;
obj.end.y = temp;
}

这基本上确保如果开始大于结束,则通过在开始结束之间交换来确保起始值始终是较低的值。

这是更新的工作小提琴:https://jsfiddle.net/ensf32e0/24/

相关内容

  • 没有找到相关文章

最新更新