将代码从Open Laszlo3.3迁移到5.0: TypeError:错误#1009:无法访问空对象引用的属性或方法

Question

当我在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>

Answer 1

在绘图视图初始化期间，在组件初始化尚未完成的时间点调用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>

​

​

编辑:更新了代码支持，以使用oncontext事件而不是isinited值

我已经检查了drawview文档，并且drawview有一个特殊的事件，称为oncontext事件。从文档中：

当上下文准备好使用时发送oncontext事件，这在IE中可能需要一些时间。

如果您查看OpenLaszlo参考中的drawview文档，您将看到示例使用oncontext事件处理程序来绘制到画布中。

我已经更新了我的解决方案，使用一个额外的属性is isready，一旦接收到oncontext事件，这个属性就被设置为true。正如您在下面的调试输出中所看到的，在将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。请在使用绘制方法之前检查是否存在context属性，和/或注册oncontext事件以确定该属性何时可用。

不幸的是，SWF运行时没有显示这样的警告。