Question

我有一个包含画布的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一起调整大小？

Answer 1

看起来你想要绑定到“resize”事件，然后在那个事件中重新绘制你的棋盘。

添加

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

到您的初始化代码

在jquery-ui对话框中调整画布大小

1 个答案: