2012-04-25 9 views
0

の内側にキャンバスのサイズを変更:は、私はキャンバスを含んでjqueryの-UIダイアログを持っている、とチェス盤がそうのようなキャンバスに描かれている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> 

今ボードはまだキャンバスにレンダリングされるが、それは、ダイアログをリサイズすることはできません。

チェス盤とコンテナの要素の大きさをカナで合わせることはできますか?

答えて

0

「サイズ変更」イベントにバインドして、そのイベント中にチェスボードを再描画したいようです。

初期化コード

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

を追加

関連する問題