0

I want to create a front-end to basically visualize a 2-dimensional array. It's a large grid, large enough that the tiles may boil down to single pixels when looking at it from afar.

I'd like to implement zooming and 2d scrolling to navigate the representation (which is nothing more than colored squares).

What's the easiest way to go about this? This is not the part of the project i'm the most interested in, so I'd like to avoid having to learn huge frameworks.

I'm perfectly willing to use a canvas and/or JS/CSS techniques over elements.

4

2 回答 2

0

二维数组会有一些模式吗？将是任何图像或东西？代表一些像自动机规则 110 或一些简单/半高级的图形画布是一个很好的选择，或者像 KineticJS 这样的框架

于 2013-02-06T20:43:07.187 回答
-1

此代码适用于画布

<canvas id="canvas"></canvas>
<script>
var arr = new Array(new Array(1,2,3), new Array(1,2,1), new Array(2,3,1));
var ctx = document.getElementById("canvas").getContext("2d");
var size = 10;
for(var i=0; i< 3;i++){
    for(var j=0; j< 3;j++){
        if(arr[i][j]==1){
        ctx.fillStyle = "red";
        }else if(arr[i][j]==2) {
        ctx.fillStyle = "blue";
        }else if(arr[i][j]==3){
        ctx.fillStyle = "green";
        }

        ctx.fillRect(i*(size+1),j*(size+1),size,size);
    }
}
</script>
于 2013-02-06T21:05:56.363 回答