Question

我需要一个棋盘用于我的应用程序，我想知道在Raphael.js中实现它的选项。我应该创建64个正方形并将它们连接在一起或单个大块并将其遮蔽为黑色和白色。

Answer 1

我认为你可以这样做：

您可以像这样描述电路板的单元格或框：

var cellSize = 25;//the size of our cell (whatever you want)
//Where x, y are the position in the board and cellSate 
//a value indicating if it is black or white.
Raphael.fn.cell = function(x, y, cellState) {
   var size = cellSize;
   var crect = paper.rect(x, y, size, size);
   if(cellState == 1)
          crect.attr({fill: "#000"});
   else
          crect.attr({fill: "#fff"});
}

并绘制董事会（根据您的目的修改）：

var chessBoard = function() {
   var cSize = 0;//auxiliary variable
   var last = 0;//allows to change the colour of the boxes
   for(var i = 0; i < rows; i += 1) {
      for(var j = 0; j < cols; j+= 1) {
          if(last == 1) {
             paper.cell(i * cSize, j * cSize, 0);
             last = 0;
          } else {
             paper.cell(i * cSize, j * cSize, 1);
             last = 1;
          }

          if(i == 0)
             cSize = cellSize;
      }
      if(last == 1) last = 0;
      else last = 1;//my trick hehe
  }

}

最后，在您的HTML代码中：

    <!DOCTYPE HTML>
    <html>
    <head> 
    <script src="./js/raphael-min.js"></script>
    <script src="./js/gof.js"></script>
    <script>
       var paper;   
       function loadBoard() {
          paper = Raphael("panel", 512, 512);
          chessBoard(cells1);
       }
    </script>
    </head>

    <body onload="loadBoard();">
       <div id="panel" style="width:100%; height:100%; position:absolute; top:0; left:0;">
       </div>
    </body>
    </html>

输出应为此（灰色部分来自浏览器）：

enter image description here

Answer 2

它是另一种形式：

<div id="paper1"></div>
    <script type="text/javascript">
        var ltam=400,paper = Raphael("paper1", ltam,ltam);
        var fins=['\u265C','\u265E','\u265D','\u265B','\u265A','\u265D','\u265E','\u265C',
                  '\u265F','\u265F','\u265F','\u265F','\u265F','\u265F','\u265F','\u265F',
                  '\u2659','\u2659','\u2659','\u2659','\u2659','\u2659','\u2659','\u2659',
                  '\u2656','\u2658','\u2657','\u2655','\u2654','\u2657','\u2658','\u2656'];
        var lfigs=paper.set();
        var chessBoard = function(swz0) {
            var r0, l0, sz0=swz0/8;
            for(var i = 0; i < 8; i++) {
                for(var j = 0; j < 8; j++) {
                    r0 = paper.rect(i * sz0, j * sz0,sz0,sz0).attr({ opacity: 0.45, fill: ((i%8+(j%8))%2)==1?"white":"silver"});
                }
            }
            for(var i = 0; i < fins.length; i++) {
                lfigs.push(paper.text((i % 8) * sz0 + sz0/2, Math.floor((i+(i<16?0:32)) / 8) * sz0 + sz0/2-(sz0/25*2), fins[i])
                    .attr({"font-family": "Arial Unicode MS", "font-size": sz0, 'fill-opacity': 0.65})
                    .hover(function (){this.animate({'fill-opacity': .99,'font-size':sz0*1.1}, 250)},
                           function (){this.animate({'fill-opacity': .65,'font-size':sz0}, 250)})
                )
            }
        };
        chessBoard(ltam);

查看示例：Crear tablero ajedrez Exitos !!!!

在Raphael.js画棋盘的方法

2 个答案: