createjsで文字に座布団をひく

HAKASHUN commented 9 years ago

下記をTextのdraw時に設定すれば、きれいにoutlineが出る

// 座布団文字のために値を修正
ctx.miterLimit = 2;
ctx.lineJoin = 'circle';

createjsがサポートしていないので、以下のパッチをあてて、createjsをoverrideする

/**
   * Text draw patch
   */
  createjs.Text.prototype.draw = function(ctx, ignoreCache) {
    if (this.DisplayObject_draw(ctx, ignoreCache)) {
      return true;
    }

    var col = this.color || "#000";
    if (this.outline) {
      ctx.strokeStyle = col;
      ctx.lineWidth = this.outline * 1;

      // 座布団文字のために値を修正
      ctx.miterLimit = 2;
      ctx.lineJoin = 'circle';
    } else {
      ctx.fillStyle = col;
    }

    this._drawText(this._prepContext(ctx));
    return true;
  };

HAKASHUN commented 9 years ago

https://github.com/CreateJS/EaselJS/pull/571 プルリクだした

HAKASHUN / manabi

createjsで文字に座布団をひく #86