0

html5 キャンバス要素を使用してデュランダルで描画しようとしていますが成功しません

マークアップ

 <body>
    <canvas id="canvas"></canvas>
 </body>

js

define(function() {

   function viewAttached() {
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    var buffer = document.createElement('canvas');
    buffer.width = buffer.height = 60;
    var bctx = buffer.getContext('2d');
    bctx.translate(30, 30);
    bctx.rotate(0.5);
    bctx.fillStyle = 'rgb(255, 0, 0)';
    bctx.fillRect(-15, -15, 30, 30);

    ctx.fillStyle = 'rgb(0, 255, 0)';
    ctx.fillRect(30, 30, 30, 30);
    ctx.drawImage(buffer, 50, 50);
    }
    var ctor = function () {
    this.viewAttached = viewAttached();
    return ctor;
    };
  });

問題は、キャンバスが読み込まれないため、表示されるのは空のキャンバスだけです。同じコードがjsfiddleでうまく機能しています。つまり、jqueryとcanvasのみを意味しますが、それをdurandalに転送すると機能しなくなり、誰か助けてもらえますか?

4

1 に答える 1

1

あなたが言及したコメントでは、それはviewAttached（）で動作していますが、実際にはあなたの質問では、実際には動作していないと述べています。私の最善の策は、A: nemesv が正しく、その関数を起動している可能性がありますが、意図した方法ではなく、B: viewAttached を呼び出したときにビューが実際にアタッチされていないことです。

これは Durandal 1.2 で動作します -

define(function() {

   function viewAttached() {
       // Do stuff
    }
    var viewModel = {
        viewAttached: viewAttached;
    };

    return viewModel;
  });

Durandal 2.0 を使用している場合は、次のようにします。

define(function() {

   function attached() {
       // Do stuff
    }
    var viewModel = {
        attached: attached;
    };

    return viewModel;
  });

これは、ルーターを使用していることを前提としています。コンストラクターを起動する必要はありません。Durandal が処理します。また、viewAttached を呼び出す必要もありません。これは、Durandal がロード サイクルの適切な時点で処理するためです (DOM の準備が整った後) http://durandaljs.com/documentation/Using-The-Router/

于 2013-09-01T21:26:58.933 に答える