1

このコードを 5.0 で実行しているときに問題に直面していますが、3.3 では問題なく動作しています。すべてを設定しましたが、それでも問題が発生します。私はこれを間違った方法でやっていますか？

<canvas width="1000" height="584">

      <drawview width="200" height="300" 
              x="12" 
              y="12">
        <handler name="onwidth">
            this.redraw();
        </handler>
        <handler name="onheight">
            this.redraw();
        </handler>
        <method name="redraw">
            this.clear();
            var roundness = 5;
            this.beginPath();
            this.moveTo(roundness, 0);
            this.lineTo(this.width - roundness, 0);
            this.quadraticCurveTo(this.width, 0, this.width, roundness);
            this.lineTo(this.width, this.height - roundness);
            this.quadraticCurveTo(this.width, this.height, this.width - roundness, this.height);
            this.lineTo(roundness, this.height);
            this.quadraticCurveTo(0, this.height, 0, this.height - roundness);
            this.lineTo(0, roundness);
            this.quadraticCurveTo(0, 0, roundness, 0);
            this.closePath();

            var g = this.createRadialGradient(-this.width * .5, -this.height *.5, .7, 1.5 * this.width, 1.5 * this.height, 0)
            this.globalAlpha = 0;
            g.addColorStop(0, 0x000000);
            this.globalAlpha = 0.8;
            g.addColorStop(1, 0xffffff);

            this.setAttribute("fillStyle", g);
            this.fill();
        </method>
    </drawview>
</canvas>
4

1 に答える 1

1

コンポーネントの初期化が完了していない時点で、drawview の初期化中に onwidth および onheight ハンドラが呼び出されています。コンポーネントの isinited 属性を確認すると、コンポーネントの準備が整ったときにのみ redraw メソッドが呼び出されるようにすることができます。何が起こっているかを示すために、この例にいくつかのデバッグ出力を追加しました。

<drawview id="dv" width="100%" height="100%" 
      x="12" 
      y="12">
  <attribute name="isready" value="false" type="boolean" />
  <handler name="oncontext">
    this.setAttribute("isready", true);
    this.redraw();
  </handler>
  <handler name="onwidth">
    Debug.write('onwidth: calling redraw()');
    this.redraw();
  </handler>
  <handler name="onheight">
    Debug.write('onheight: calling redraw()');
    this.redraw();
  </handler>
  <method name="redraw">
    Debug.info('redraw: this.ininited=' + this.isinited + ' / isready=' + this.isready);
    if (this.isready) {
      this.clear();
      var roundness = 5;
      this.beginPath();
      this.moveTo(roundness, 0);
      this.lineTo(this.width - roundness, 0);
      this.quadraticCurveTo(this.width, 0, this.width, roundness);
      this.lineTo(this.width, this.height - roundness);
      this.quadraticCurveTo(this.width, this.height, this.width - roundness, this.height);
      this.lineTo(roundness, this.height);
      this.quadraticCurveTo(0, this.height, 0, this.height - roundness);
      this.lineTo(0, roundness);
      this.quadraticCurveTo(0, 0, roundness, 0);
      this.closePath();

      var g = this.createRadialGradient(-this.width * .5, -this.height *.5, .7, 1.5 * this.width, 1.5 * this.height, 0);
      this.globalAlpha = 0;
      g.addColorStop(0, 0x000000);
      this.globalAlpha = 0.8;
      g.addColorStop(1, 0xffffff);

      this.setAttribute("fillStyle", g);
      this.fill();
    }
  </method>
</drawview>

編集: isinited 値の代わりに oncontext イベントを使用するようにコード サポートを更新しました

drawview のドキュメントを確認したところ、drawview には oncontext イベントと呼ばれる特別なイベントがあります。ドキュメントから：

oncontext イベントは、コンテキストを使用する準備ができたときに送信されます。IE DHTML では時間がかかる場合があります。

OpenLaszlo リファレンスの drawview ドキ​​ュメントを見ると、例では oncontext イベント ハンドラーを使用してキャンバスに描画されていることがわかります。oncontext イベントが受信されると true に設定される
追加の属性isreadyを使用するようにソリューションを更新しました。以下のデバッグ出力でわかるように、isready が true に設定される前に isinited が true に設定されます。

onwidth: calling redraw() 
INFO: redraw: this.ininited=true / isready=false 
onheight: calling redraw() 
INFO: redraw: this.ininited=true / isready=false 
INFO: redraw: this.ininited=true / isready=true

DHTML ランタイムのエラーを含むコードをコンパイルすると、次の警告が表示されるはずです。

警告: this.context はまだ定義されていません。描画メソッドを使用する前にコンテキスト プロパティの存在を確認するか、oncontext イベントに登録して、プロパティがいつ利用可能になるかを確認してください。

残念ながら、SWF ランタイムではこのような警告は表示されません。

于 2012-08-27T13:44:23.107 に答える