Skip to main content Module draw_helpers Copy item path Source BgImgTimer 🔒 早期 return が複数あるため、Drop で確実に積む。 TickTimer 🔒 早期 return が複数あるため、Drop で確実に積む。 ClipShape Parsed clip-path shape in element-relative pixel coordinates. BG_IMG_TICKS 🔒 background-image を要素の box 内に描画する。background-size/repeat/position を反映する。
bg_size が Stretch（未指定時の既定）なら従来どおり box 全面へ引き伸ばす。
layer_override を指定すると、複数レイヤー（background-image: url(a), url(b)）の
うちこのレイヤーだけの size/repeat-x/repeat-y/pos-x/pos-y を使う（以前は全レイヤーが
el 側の単一の値を共有しており、レイヤーごとの background-position/-size/-repeat
指定が無視されるバグがあった）。None なら従来通り el の値をそのまま使う。
【2026-07-31計測】背景画像描画に費やした tick の累積（フレーム毎にリセット）。
paint が 2.7 秒／フレームかかっている内訳を切り分けるため。 BORDER_TICKS 🔒 【2026-07-31計測】ボーダー描画に費やした tick の累積。 GRAD_TICKS 🔒 【2026-07-31計測】グラデーション描画に費やした tick の累積。 IMG_TICKS 🔒 【2026-07-31計測】<img> の拡縮描画に費やした tick の累積。 OTHERFILL_TICKS 🔒 【2026-08-01計測】linear 以外の大面積描画
（radial / conic / 2 色グラデーション / rotate / skew）の累積 tick。
GRAD_TICKS は draw_linear_gradient しか見ていなかった。 apply_backdrop_filters_to_screen_rect 🔒 apply_css_filters 🔒 grayscale/brightness/invert/sepia/contrast/saturate を順に適用する（blur/hue-rotate 等の非対応関数は無視）。 apply_css_filters_argb 🔒 0xAARRGGBB 形式の色に apply_css_filters を適用する（alpha は変更しない）。 bg_clip_rect 🔒 background-clip に基づき、背景の描画を制限すべき矩形（border-box 座標系）を返す。
border-box（既定）なら el の外形そのまま。bg_origin_shift 🔒 background-origin に基づき、draw_background_image() へ渡す
(origin_shift_x, origin_shift_y, origin_w, origin_h) を計算する。
origin_shift_* は基準 box の左上が描画 box(eff_w/eff_h の左上)から
どれだけ内側にあるか、origin_w/origin_h は基準 box 自体のサイズ。blend_non_separable 🔒 hue/saturation/color/luminosity（非可分ブレンドモード）。W3C Compositing and
Blending Level 1 の Lum/ClipColor/SetLum/Sat/SetSat アルゴリズムをそのまま実装する。
dst = backdrop(Cb)、src = source(Cs)。 blend_pixel 🔒 mix-blend-mode / background-blend-mode: 描画しようとしている色(src)を、
既にフレームバッファ上にある色(dst = 背景)と指定モードで合成する。
対応: normal(そのまま)/multiply/screen/darken/lighten/difference/overlay/
hard-light/soft-light/exclusion/color-dodge/color-burn（チャネルごとの独立計算）と、
hue/saturation/color/luminosity（W3C Compositing 仕様の Lum/Sat/SetLum/SetSat
アルゴリズムに基づく非可分モード、3チャネルまとめて計算）。blur_screen_rect 🔒 画面上の指定矩形領域をボックスブラーする（インプレースではなく一時バッファを使用）。 box_inset 🔒 background-clip の "border-box"/"padding-box"/"content-box" を
実際のピクセル差分（border 幅、または border+padding 幅）に変換する。
border-box は無変換（0,0,0,0）。clip_inside Returns true if point (ox, oy) in element-local pixels is inside the clip shape.
計算量: O(V) — V は多角形の頂点数（polygon() の場合）。
円・楕円・矩形は O(1)。
毎ピクセル呼ばれる ため、多角形クリップは面積 × 頂点数で効く。 clip_len 🔒 clip_pos 🔒 circle()/ellipse() の at <cx> <cy> 位置トークンを解決する。%/px/数値に
加え、left/top/right/bottom/center のキーワードにも対応する（以前は
clip_len が数値/単位しか扱えず、キーワードは s.parse::<f32>() に失敗して
静かに 0 へフォールバックしていた。circle(50% at right) が cx=w ではなく
cx=0 になる等、位置が壊れるバグがあった）。draw_background_image 🔒 計算量: O(Wd×Hd × R) — Wd,Hd は描画先サイズ、R は
background-repeat によるタイル数（no-repeat なら 1）。 draw_border draw_border_with_style 🔒 draw_conic_gradient conic-gradient(c1, c2, ..., cN) — N色ストップを角度方向へ（12時方向起点、時計回り）
補間して描画する。以前は kernel::draw::Screen::draw_conic_gradient_rect が2色固定
だったため3色目以降が失われていた。ここでは draw_linear_gradient と同じ補間ロジック
（sample_gradient_stops）を角度ベースの t に適用する。draw_dashed_border 🔒 draw_decoration_line 🔒 text-decoration-line（underline/line-through）の水平線を style
（solid/dotted/dashed/wavy/double、空文字またはその他は solid 扱い）と
thickness（text-decoration-thickness、px。最低1pxにクランプ）で描画する。draw_gradation draw_image_nn_blit 🔒 list-style-image 用の小さな画像を (x0,y0) を左上として dst_w x dst_h へ最近傍スケーリング
して描画する。クリップ・object-fit 等は考慮しない簡易実装（マーカーサイズのアイコン用途）。draw_img_object_fit 🔒 計算量: O(Wd×Hd) — Wd,Hd は描画先サイズ。
1 ピクセルごとに元画像をサンプリングする（sample_bilinear_rgba 使用時は
1 ピクセルあたり 4 点読み出し＋補間で定数倍が 4 倍になる）。 draw_individual_borders 🔒 計算量: O(W + H) — 枠線 4 辺の長さに比例（太さは定数倍）。
面積ではないので軽い。実測 0〜1 tick。 draw_linear_gradient 計算量: O(W×H) （LUT 化後）— W,H は塗る矩形のサイズ。 draw_outline 🔒 outline を描画する。border-box の外側に offset だけ離して width px の枠線を引く。
レイアウトに影響しない装飾のため、border とは独立して呼ぶ。 draw_radial_gradient draw_rotated_rect_filled CSS transform: rotate(Ndeg) 向け — 回転した塗りつぶし矩形を描く。
cx/cy は回転中心（スクリーン座標）、w/h は元の矩形サイズ、angle_deg は時計回り度数。 draw_skewed_rect_filled CSS transform: skewX(deg) / skewY(deg) 向け — せん断変形した塗りつぶし矩形を描く。 extract_border_color 🔒 extract_border_style 🔒 parse_blur_radius 🔒 filter 文字列から blur(Npx) の半径を px 単位で抽出する（無ければ 0）。
パフォーマンス上の理由で半径は 1〜8px にクランプする簡略実装（ボックスブラー1回のみ、
実ブラウザのようなガウシアン近似の複数パスは行わない）。parse_clip_shape Parse CSS clip-path value into pixel coordinates relative to the element.
w and h are the element’s rendered width and height in pixels. parse_drop_shadow 🔒 filter 文字列から drop-shadow(ox oy blur color) を抽出し、box-shadow相当のタプルを返す。parse_filter_tokens 🔒 filter の1関数トークン（例 “grayscale(1)”）を (種別文字列, 引数) にパースする。
引数省略時は 1.0（各フィルタの完全適用値）とする。% サフィックスは 0-1 に正規化。point_in_rounded_rect 点 (px, py)（要素ローカル座標）が角丸矩形の内側にあるかを返す。
w, h は要素サイズ、r は border-radius（ピクセル）。
計算量: O(1) — 4 隅の楕円判定のみ。 polygon_contains 🔒 even-odd 規則（既定のfill-rule）での内外判定。自己交差の無い多角形では
nonzero と同じ結果になるが、自己交差する多角形では領域の解釈が異なる。 polygon_contains_nonzero 🔒 nonzero 規則（clip-path: polygon(nonzero, ...)）での内外判定。各辺との交差方向
（上向き/下向き）を winding number として加減算し、合計が0でなければ内側とする
（自己交差する多角形で even-odd と異なる結果を返す標準的な winding-number 法）。 sample_bilinear_rgba 🔒 計算量: O(1) — 近傍 4 点の読み出しと 2 段補間。
最近傍サンプリングの約 4 倍の定数倍。毎ピクセル呼ばれる 。 sample_box_blur 🔒 img の (src_row, src_col) を中心に半径 radius（source pixel 単位）のボックスブラーを
かけた色を返す。画像端はクランプせず範囲外を単純にスキップする（サンプル数で正規化）。sample_gradient_stops 🔒 stops（position 昇順ソート済み前提）から、位置 t（0.0-1.0）における補間色を得る。
draw_linear_gradient の同ロジックを N ストップの conic-gradient でも再利用するために
独立関数として切り出した。
計算量: O(S) — S はストップ数（線形走査）。
4 チャンネルの浮動小数補間を伴うため定数倍も小さくない。
毎ピクセルで呼ばない こと（呼び出し側で LUT 化する）。