Houdini Paint API

registerProperty()

CSS で指定した debug フラグは、 pain() の引数ではなく、別のプロパティとして取得する。

このためには、まず Worklet がアクセス可能なプロパティとして --debug をメインスレッド側で registerProperty() を用いて登録する。

CSS Properties and Values API Level 1

--debug は true/false を引数に取りたいが、 Property Values の定義する Syntax List には <boolean> は無いため、 <custom-indent> を利用し、文字列で代替することとした。

CSS.registerProperty({
  name: '--debug',
  syntax: '<custom-ident>',
  inherits: true,
  initialValue: 'false',
});

inputProperties()

registerProperty() で登録された値は、 Worklet 側で inputProperties() に、セーフリストとして指定しておくことで、クラス内に取り込むことができる。

static get inputProperties() {
  return [
    '--debug',
  ]
}

これにより、後述する paint() callback に渡る Property Style Map に値が含まれる。

Rendering Context

第一引数は 2D のレンダリングコンテキストである。

ここから Canvas の API を呼ぶことで、実際の描画処理を行う。

moveTo(), lineTo(), strokeRect(), fillRect() などといったおなじみの Canvas API が利用可能だ。

しかし、あくまでサブセットであり前述のように strokeText() などフォントスタックがないなど、使えないものもある。

Paint Size

第二引数は描画対象のサイズであり Width, Height を持つ単純なオブジェクトだ。

Style Property Map

前述の inputProperties() で指定したプロパティが含まれた Map が渡される。

今回指定した --debug は、以下のように取得できる。

const DEBUG = styleMap.get('--debug').value

ただし、これは指定した型の都合上、文字列の "true" か "false" になっている。

Arguments

前述の inputArguments() で指定した引数が配列で渡ってくる。

各値は、指定した型でパースされた Typed OM の形でアクセス可能だ。

CSS Typed OM Level 1

// paint(border-double-custom, orange, 3px, yellow, 5px, 1px);
paint(ctx, size styleMap, arguments) {
  // CSSKeywordValue {value: "orange"}
  // CSSUnitValue {value: 3, unit: "px", type: "length"}
  // CSSKeywordValue {value: "yellow"}
  // CSSUnitValue {value: 5, unit: "px", type: "length"}
  // CSSUnitValue {value: 1, unit: "px", type: "length"}
  console.log(arguments)
}

(CSSColorValue がまだ無いため、 <color> が CSSKeywordValue になっている。#159)

例

例えば、その領域全体を、第一引数で渡ってきた色で塗りつぶす場合は、以下のように Canvas API で描画できる。

paint(ctx, {width: w, height: h}, styleMap, [color]) {
    ctx.strokeStyle = color
    ctx.fillRect(0, 0, w, h)
})

完成形

あとは、 paint() の中で要求を満たす二つの矩形を描画する処理を記述すれば良い。

<style>
div {
  font-size: 30px;
  text-align: center;
  margin: 1em;
  padding: 0;

  /* fall back */
  border: double 4px red;

  /* debug option */
  --debug: false;

  /* area size for border */
  --border-width: 10;
  border-image-slice: var(--border-width);
  border-width: calc(var(--border-width) * 1px);

  /* paint(border-double-custom, outer-color, outer-width, inner-color, inner-width, margin) */
  border-image-source: paint(border-double-custom, orange, 3px, yellow, 5px, 1px);
}
</style>

<div>CSS Paint API</div>

<script>
CSS.registerProperty({
  name: '--debug',
  syntax: '<custom-ident>',
  inherits: true,
  initialValue: 'false',
});

CSS.paintWorklet.addModule('border-double-custom.js');
</script>

registerPaint('border-double-custom', class {
  static get inputProperties() {
    return [
      '--debug',
    ]
  }

  static get inputArguments() {
    return [
      '<color>',  // outer_color
      '<length>', // outer_width
      '<color>',  // inner_color
      '<length>', // inner_width
      '<length>', // margin
    ]
  }

  paint(ctx, {width: w, height: h}, styleMap, args) {
    console.log(ctx)
    console.log(args)

    const [
      {value: outer_color},
      {value: outer_width},
      {value: inner_color},
      {value: inner_width},
      {value: margin}
    ] = args

    console.log(outer_color, outer_width, inner_color, inner_width, margin)

    // --debug
    const DEBUG = styleMap.get('--debug').value == "true"
    if (DEBUG) {
      ctx.fillStyle = "cyan";
      ctx.fillRect(0, 0, w, h);
    }

    // outer
    this.rect(ctx, outer_color, outer_width, 0, 0, w, h)

    // inner
    let m = margin + outer_width
    this.rect(ctx, inner_color, inner_width, m, m, w-(2*m), h-(2*m))
  }

  rect(ctx, color, l, x, y, w, h) {
    ctx.strokeStyle = color
    ctx.lineWidth = l
    // shit inside for half of line width
    ctx.strokeRect(x+(l/2), y+(l/2), w-l, h-l)
  }
})