draw関数の引数はもっとすっきり書けませんか?

2020年7月24日
ユーザー

クロッククラスで角度とコンテキストの設定してドロワークラスのドローメソッドに渡して描画させる。というのが下記のコードだと思うのですが

drawFace() {
      for (let angle = 0; angle < 360; angle += 6) {
        this.drawer.draw(angle, ctx => {
          ctx.moveTo(0, -this.r);
          if (angle % 30 === 0) {
            ctx.lineWidth = 2;
            ctx.lineTo(0, -this.r + 10);
            ctx.font = '13px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
          } else {
            ctx.lineTo(0, -this.r + 5);
          }
        });
      }
    }

正直わかりにくいと言うか読みくいので無名関数にしているのを切り出してみたら少しは読みやすいのではと思いやってみたらうまくいきません。

ちなみにエラーは Uncaught TypeError: Cannot read property 'r' of undefined です。r はクラス内にコンストラクタで定義されているのですが。。。

drawFace() {
      for (let angle = 0; angle < 360; angle += 6) {
        function func(ctx) {
          ctx.moveTo(0, -this.r);
          if (angle % 30 === 0) {
            ctx.lineWidth = 2;
            ctx.lineTo(0, -this.r + 10);
            ctx.font = '13px Arial';
            ctx.textAlign = 'center';
            ctx.fillText(angle / 30 || 12, 0, -this.r + 25);
          } else {
            ctx.lineTo(0, -this.r + 5);
          }
        }
        this.drawer.draw(angle, func);
      }
    }

funcの部分をいろいろいじってみてもうまくいきません。

this.drawer.draw(angle, func());
this.drawer.draw(angle, func(ctx));
this.drawer.draw(angle, func(););
this.drawer.draw(angle, () => {func()};);

などなど...。

切り出しができないからあえてこのようになっているのでしょうか?
よろしく願いします。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?