@jiujue/react-canvas-fiber 2.1.1 → 2.1.2

package/README.md

@@ -69,6 +69,10 @@ Common props:
 
 - `style?: YogaStyle`: layout box; see Layout section below
 - `background?: string`: background fill color
+- `backgroundImage?: string`: image URL
+- `backgroundSize?: string`: `cover` | `contain` | `auto` | `100px 50px` | `50% 50%`
+- `backgroundPosition?: string`: `center` | `top left` | `10px 20px` | `50% 50%`
+- `backgroundRepeat?: string`: `repeat` | `no-repeat` | `repeat-x` | `repeat-y`
 - `border?: string`: CSS-like border. Supported forms:
   - `"<number>px solid <color>"` (e.g. `1px solid rgba(255,255,255,0.2)`)
   - `"<number> <color>"` (e.g. `2 #fff`)

package/README.zh.md

@@ -69,6 +69,10 @@ export function Example() {
 
 - `style?: YogaStyle`：布局样式，见下方「布局（Yoga 子集）」
 - `background?: string`：背景填充色
+- `backgroundImage?: string`：背景图片 URL
+- `backgroundSize?: string`：`cover` | `contain` | `auto` | `100px 50px` | `50% 50%`
+- `backgroundPosition?: string`：`center` | `top left` | `10px 20px` | `50% 50%`
+- `backgroundRepeat?: string`：`repeat` | `no-repeat` | `repeat-x` | `repeat-y`
 - `border?: string`：类似 CSS 的 border，支持：
   - `"<number>px solid <color>"`（例如 `1px solid rgba(255,255,255,0.2)`）
   - `"<number> <color>"`（例如 `2 #fff`）

package/dist/index.cjs

@@ -48,6 +48,8 @@ function createNode(type, props) {
   };
   if (type === "Image") {
     node.imageInstance = null;
+  } else if (type === "View") {
+    node.backgroundImageInstance = null;
   }
   return node;
 }
@@ -131,6 +133,105 @@ function drawBorder(ctx, x, y, w, h, radius, border) {
   ctx.stroke();
   ctx.restore();
 }
+function resolveBgRepeat(repeat) {
+  if (!repeat) return "repeat";
+  if (repeat === "no-repeat" || repeat === "repeat-x" || repeat === "repeat-y" || repeat === "repeat")
+    return repeat;
+  return "repeat";
+}
+function parseBgSize(size, w, h, imgW, imgH) {
+  if (!size || size === "auto") return { width: imgW, height: imgH };
+  if (size === "cover") {
+    const scale = Math.max(w / imgW, h / imgH);
+    return { width: imgW * scale, height: imgH * scale };
+  }
+  if (size === "contain") {
+    const scale = Math.min(w / imgW, h / imgH);
+    return { width: imgW * scale, height: imgH * scale };
+  }
+  const parts = size.trim().split(/\s+/);
+  let rw = imgW;
+  let rh = imgH;
+  if (parts[0]) {
+    if (parts[0].endsWith("%")) {
+      rw = w * parseFloat(parts[0]) / 100;
+    } else if (parts[0] !== "auto") {
+      rw = parseFloat(parts[0]);
+    }
+  }
+  if (parts[1]) {
+    if (parts[1].endsWith("%")) {
+      rh = h * parseFloat(parts[1]) / 100;
+    } else if (parts[1] !== "auto") {
+      rh = parseFloat(parts[1]);
+    }
+  } else {
+    if (parts[0] !== "auto") {
+      rh = imgH * (rw / imgW);
+    }
+  }
+  return { width: rw, height: rh };
+}
+function parseBgPos(pos, w, h, targetW, targetH) {
+  const parts = (pos || "").trim().split(/\s+/);
+  if (parts.length === 0 || parts.length === 1 && !parts[0]) {
+    return { x: 0, y: 0 };
+  }
+  const xStr = parts[0];
+  let yStr = parts[1];
+  if (parts.length === 1) {
+    yStr = "center";
+  }
+  function resolve(val, containerDim, imgDim) {
+    if (val === "left" || val === "top") return 0;
+    if (val === "right" || val === "bottom") return containerDim - imgDim;
+    if (val === "center") return (containerDim - imgDim) / 2;
+    if (val.endsWith("%")) {
+      return (containerDim - imgDim) * parseFloat(val) / 100;
+    }
+    if (val.endsWith("px")) {
+      return parseFloat(val);
+    }
+    return parseFloat(val) || 0;
+  }
+  return {
+    x: resolve(xStr, w, targetW),
+    y: resolve(yStr, h, targetH)
+  };
+}
+function drawBackgroundImage(ctx, node, x, y, w, h, radius) {
+  const img = node.backgroundImageInstance;
+  if (!img || !img.complete || img.naturalWidth === 0 || img.naturalHeight === 0) return;
+  const props = node.props;
+  const bgSize = props.backgroundSize;
+  const bgPos = props.backgroundPosition;
+  const bgRepeat = resolveBgRepeat(props.backgroundRepeat);
+  const imgW = img.naturalWidth;
+  const imgH = img.naturalHeight;
+  const { width: targetW, height: targetH } = parseBgSize(bgSize, w, h, imgW, imgH);
+  const { x: posX, y: posY } = parseBgPos(bgPos, w, h, targetW, targetH);
+  ctx.save();
+  drawRoundedRect(ctx, x, y, w, h, radius);
+  ctx.clip();
+  if (bgRepeat === "no-repeat") {
+    ctx.drawImage(img, x + posX, y + posY, targetW, targetH);
+  } else {
+    const pattern = ctx.createPattern(img, bgRepeat);
+    if (pattern) {
+      const matrix = new DOMMatrix();
+      const scaleX = targetW / imgW;
+      const scaleY = targetH / imgH;
+      matrix.translateSelf(x + posX, y + posY);
+      matrix.scaleSelf(scaleX, scaleY);
+      pattern.setTransform(matrix);
+      ctx.fillStyle = pattern;
+      ctx.beginPath();
+      ctx.rect(x, y, w, h);
+      ctx.fill();
+    }
+  }
+  ctx.restore();
+}
 function drawNode(state, node, offsetX, offsetY) {
   const { ctx } = state;
   const x = offsetX + node.layout.x;
@@ -165,6 +266,10 @@ function drawNode(state, node, offsetX, offsetY) {
       ctx.fill();
       ctx.restore();
     }
+    const viewNode = node;
+    if (viewNode.backgroundImageInstance) {
+      drawBackgroundImage(ctx, viewNode, x, y, w, h, viewRadius);
+    }
     if (scrollX || scrollY) {
       viewIsScroll = true;
       ctx.save();
@@ -645,6 +750,18 @@ var hostConfig = {
       if (!img.complete) {
         img.onload = () => rootContainer.invalidate();
       }
+    } else if (type === "View" && props.backgroundImage) {
+      const viewNode = node;
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.src = props.backgroundImage;
+      if (img.dataset) {
+        img.dataset.src = props.backgroundImage;
+      }
+      viewNode.backgroundImageInstance = img;
+      if (!img.complete) {
+        img.onload = () => rootContainer.invalidate();
+      }
     }
     return node;
   },
@@ -729,6 +846,38 @@ var hostConfig = {
           }
         }
       }
+    } else if (instance.type === "View") {
+      const viewNode = instance;
+      const newBg = instance.props.backgroundImage;
+      const currentBg = viewNode.backgroundImageInstance?.dataset?.src;
+      if (newBg !== currentBg) {
+        if (!newBg) {
+          viewNode.backgroundImageInstance = null;
+        } else {
+          const img = new Image();
+          img.crossOrigin = "anonymous";
+          img.src = newBg;
+          if (img.dataset) {
+            img.dataset.src = newBg;
+          }
+          viewNode.backgroundImageInstance = img;
+          const invalidate = () => {
+            let p = viewNode;
+            while (p) {
+              if (p.type === "Root") {
+                p.container?.invalidate();
+                return;
+              }
+              p = p.parent;
+            }
+          };
+          if (!img.complete) {
+            img.onload = invalidate;
+          } else {
+            invalidate();
+          }
+        }
+      }
     }
   },
   commitTextUpdate() {