0

I am having a problem getting the desired layout of canvas elements on a page. I am using a table to do the layout. The desired layout is to have one canvas to the left that is full height and two other canvases to the right, one on top of the other, with a combined height of the left canvas. The two right canvases are of fixed width and height. When the browser window is resized I want the left canvas to resize to take up all the width available (up to the width of the right canvases). I am using window.onresize event to catch the resize events and to resize the left canvas.

The problem I see is that the left cavas will resize correctly when the browser window width gets bigger, but fails to shrink when the browser window width gets smaller! The code is below. What gives? Is there something inherent in canvas that doesn't allow flexible resizing?

I have searched for a answer to this issue with no luck. Hopefully someone here has conquered this and can give me a hand.

Here is sample code:

<!DOCTYPE html>
<html>
    <head>
        <title>SO Example</title>
        <script type="text/javascript">
            window.onload = function ()
            {
                var canvas = document.getElementById("wf1");
                canvas.width = canvas.parentNode.clientWidth;
                canvas.height = canvas.parentNode.clientHeight;
            }
            window.onresize = function ()
            {
                var canvas = document.getElementById("wf1");
                canvas.width = canvas.parentNode.clientWidth;
                canvas.height = canvas.parentNode.clientHeight;
            }
        </script>

        <style type="text/css">
            table
            {
                border-collapse: collapse;
                background-color: #ccc;
            }
            tr, td
            {
                padding: 0;
                line-height: 0;
                width: 100%;
            }
        </style>
    </head>

    <body>
        <table>
            <tr class="slot">
                <td>
                    <canvas id="wf1" class="wfblock" style="background-color:red;"></canvas>
                </td>
                <td>
                    <canvas id="pm1" style="background-color: green; width: 200px; height: 84px;"></canvas>
                    <canvas id="pm2" style="background-color: blue;  width: 200px; height: 84px;"></canvas>
                </td>
            </tr>
        </table>
    </body>
</html>

date format in a grid ext 4.1

I'm getting inconstant results with my dates. Sometime they are getting converted to us format. I have the following json

{ "Created":"09/03/12" }

In my grid i have

{
  id: 'Created',
  text: "Created",
  dataIndex: 'Created',
  xtype: 'datecolumn',
  format: 'd/m/y',
  width: 150,
  sortable: true,
  field: {
    xtype: 'datefield',
    allowBlank: false,
    format: 'd/m/y'
  }
},

So i want to display

09/03/12 (9th March) but i'm getting 03/09/12

4

1 に答える 1

0

キャンバスは、拡大と縮小の両方向に調整できます。

私はそれを頻繁に行いますが、常に機能する唯一のこと (特にテーブルが関係する場合) は、幅と高さの両方に 100% の寸法を指定し、コンテナー ( atdまたは a div) を古典的な方法で調整することであることがわかりました。

ビューポートのサイズがキャンバスのサイズと異なるという問題を回避するために、サイズ変更イベントのリスナーを常に追加しています。

jquery を使用すると、通常は次のようなクラスになります。このクラスでは、キャンバスごとに Grapher のインスタンスが作成されます。

function Grapher(options) {
    this.graphId = options.canvasId;
    this.dimChanged = true; // you may remove that if you want (see above)
};

Grapher.prototype.draw = function() {
    if (!this._ensureInit()) return;

    // makes all the drawing, depending on the state of the application's model

    // uses dimChanged to know if the positions and dimensions of drawed objects have
    //  to be recomputed due to a change in canvas dimensions

}

Grapher.prototype._ensureInit = function() {
    if (this.canvas) return true;
    var canvas = document.getElementById(this.graphId);
    if (!canvas) {
        return false;
    }
    if (!$('#'+this.graphId).is(':visible')) return false;
    this.canvas = canvas;
    this.context = this.canvas.getContext("2d");
    var _this = this;
    var setDim = function() {
        _this.w = _this.canvas.clientWidth;
        _this.h = _this.canvas.clientHeight;
        _this.canvas.width = _this.w;
        _this.canvas.height = _this.h;
        _this.dimChanged = true;
        _this.draw(); // calls the function that draws the content
    };
    setDim();
    $(window).resize(setDim);
    // other inits (mouse hover, mouse click, etc.)
    return true;
};

あなたの場合、たとえば作成しますnew Grapher({canvasId:'#wf1'})。

于 2012-05-14T19:41:30.793 に答える