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: function(event, ui) { drawChessBoard() }

初期化コードに

于 2012-04-25T21:33:06.143 に答える