到目前为止我得到了什么:
我可以使用一些简单的语法将形状绘制到 Canvas 中:
let shape = "10n10" // example shapeSyntax (*)
shapeSyntax: "1" == "colored area"
"0" == "blank area"
"n" == "new line"
* So creating a simple line (width = 4, height = 1) is possible using the syntax "1111"
* Creating a square (width = 2, height = 2) is possible using the syntax "11n11" (n stands for new line)
* Creating a stair -shape would be possible using the syntax "001n011n111"
到目前为止,这工作得很好。 所以我添加了代码,以便您查看自己的代码:
我想得到什么:
我想开发一个 rotate(degree)
函数,它能够旋转语法(不仅仅是 Canvas 元素或其他东西!! !) 围绕 [90, 180, 270]
度的任何形状。
因此将语法为“1111”的行旋转大约 90deg
应该得到“1n1n1n1”:
rotate("1111", 90) // == "1n1n1n1"
请看这张图片,我很确定它会有助于理解:
What I've noticed is that rotating any shape around 180deg the syntax could just be changed by reading it backwards:
"1011" gets "1101"
. But how can I get the syntax from0->90deg
? I got no idea how so any help how to solve this would be really appreciated. Thanks in advance.
// This is what I've got
// The 4 shapes where
// "1" == "colored area"
// "0" == "blank area"
// "n" == "new line"
let shapeA = "1111"
let shapeB = "10n11"
let shapeC = "111n011"
let shapeD = "00111n11100"
// This is the function to draw the shapes using *canvas*
let drawShape = function(shape, offset) {
shape = shape.split("n");
let shapeHeight = shape.length,
shapeWidth = shape[0].length;
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
canvas.width = canvas.height = 300;
ctx.fillStyle=["red", "green", "blue", "gray", "magenta", "orange", "yellow"][Math.round(Math.random()*6)];
for (let y=0; y<shapeHeight; y++) {
for (let x=0; x<shapeWidth; x++) {
if (shape[y][x] === "1")
ctx.fillRect(x*20, y*20, 20, 20);
}
}
canvas.style.position = "absolute";
canvas.style.left = offset + "%";
document.getElementById("element").append(canvas)
}
// This is how I'm able to call the function (the second parameter is for the offset of the position)
drawShape(shapeA, 0);
drawShape(shapeB, 20);
drawShape(shapeC, 40);
drawShape(shapeD, 60);
input {
position: absolute;
top: 50%;
z-index: 4
}
<input type="text" oninput="document.getElementById('element').innerHTML = ''; drawShape(this.value, 10)" placeholder="input shape syntax"/>
<div id="element"></div>
最佳答案
转换成二维数组,旋转(transpose)然后转换回来。
编辑:谢谢 meowgoesthedog,转置并不代表我认为的意思。
var rotate = array => array[0].map( (col, i) => array.map(row => row[i]).reverse() );
var decode = str => str.split('n').map( s => s.split('') )
var encode = arr => arr.map( a => a.join('') ).join('n')
encode( rotate( decode( '01n00' ) ) )
关于javascript - 如何旋转形状?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51126073/