0

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

4

2 回答 2

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>

输出应该是这样的（灰色部分来自浏览器）：

在此处输入图像描述

于 2012-09-03T18:13:27.297 回答
1

它的另一种形式：

<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！！！！

于 2015-10-16T18:53:01.580 回答