0

我有一个包含画布的 jquery-ui 对话框，并且棋盘被绘制到画布上，如下所示：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script>
$(function) {
    $("#chessboard").dialog({
        autoOpen: true,
        height: 500,
        width: 500,
        modal: false
    }

    function drawboard() {
        ctxt = document.getElementByID("chessboard").getContext("2d");

        // draw the board into the context
        ...
    }

    drawboard();
    </script>
    </head>
    <body>
    <canvas id="chessboard" width="400" height="400" />
    </body>
    </html>

棋盘填满了整个对话框，但是当我发现棋盘可以与对话框一起调整大小时，我感到非常惊讶。然后我尝试了以下操作，以便将例如游戏符号与棋盘一起安排到对话框中：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js></script>
<script>
$(function) {
    $("#chessboard-container").dialog({
        autoOpen: true,
        height: 500,
        width: 500,
        modal: false
    }

    function drawboard() {
        ctxt = document.getElementByID("chessboard").getContext("2d");

        // draw the board into the context
        ...
    }

    drawboard();
    </script>
    </head>
    <body>
    <div id="chessboard-container">
        <canvas id="chessboard" width="400" height="400" />
        <div id="notation"></div>
    </div>
    </body>
    </html>

现在板子仍然渲染到画布上，但不能用对话框调整它的大小。

是否可以与 canas 一起调整 chessboard-container 元素的大小？

4

1 回答 1

0

看起来您想绑定到“resize”事件，然后在该事件期间重新绘制棋盘。

添加一个

resize: function(event, ui) { drawChessBoard() }

到你的初始化代码

于 2012-04-25T21:33:06.143 回答