feat: background-repeat #22

package.json

@@ -1,6 +1,6 @@
 {
   "name": "karas",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "description": "A flexible JavaScript framework for graphics programming on Canvas/Svg.",
   "maintainers": [
     {

src/node/Xom.js

@@ -576,6 +576,32 @@ class Xom extends Node {
           }
           let originX = x2 + calBackgroundPosition(backgroundPosition[0], iw, width);
           let originY = y2 + calBackgroundPosition(backgroundPosition[1], ih, height);
+          let xnl = 0;
+          let xnr = 0;
+          let ynt = 0;
+          let ynb = 0;
+          // repeat-x
+          if(['repeat-x', 'repeat'].indexOf(backgroundRepeat) > -1) {
+            let diff = originX - x2;
+            if(diff > 0) {
+              xnl = Math.ceil(diff / w);
+            }
+            diff = x2 + iw - originX - w;
+            if(diff > 0) {
+              xnr = Math.ceil(diff / w);
+            }
+          }
+          // repeat-y
+          if(['repeat-y', 'repeat'].indexOf(backgroundRepeat) > -1) {
+            let diff = originY - y2;
+            if(diff > 0) {
+              ynt = Math.ceil(diff / h);
+            }
+            diff = y2 + ih - originY - h;
+            if(diff > 0) {
+              ynb = Math.ceil(diff / h);
+            }
+          }
           // 超出尺寸模拟mask截取
           let needMask = ['repeat-x', 'repeat-y', 'repeat'].indexOf(backgroundRepeat) > -1
             || originX < x2 || originY < y2 || w > iw || h > ih;
@@ -588,11 +614,43 @@ class Xom extends Node {
               this.root.__clear();
             }
             ctx.drawImage(this.__loadBgi.source, originX, originY, w, h);
-            // repeat-x
-            if(['repeat-x', 'repeat'].indexOf(backgroundRepeat) > -1) {
+            // 分4个角分别判断
+            if(xnl > 0 || ynt > 0) {
+              for(let i = 0; i <= Math.max(xnl, 1); i++) {
+                for(let j = 0; j <= Math.max(ynt, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    ctx.drawImage(this.__loadBgi.source, originX - i * w, originY - j * h, w, h);
+                  }
+                }
+              }
+            }
+            if(xnr > 0 || ynt > 0) {
+              for(let i = 0; i <= Math.max(xnr, 1); i++) {
+                for(let j = 0; j <= Math.max(ynt, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    ctx.drawImage(this.__loadBgi.source, originX + i * w, originY - j * h, w, h);
+                  }
+                }
+              }
+            }
+            if(xnl > 0 || ynb > 0) {
+              for(let i = 0; i <= Math.max(xnl, 1); i++) {
+                for(let j = 0; j <= Math.max(ynb, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    ctx.drawImage(this.__loadBgi.source, originX - i * w, originY + j * h, w, h);
+                  }
+                }
+              }
+            }
+            if(xnr > 0 || ynb > 0) {
+              for(let i = 0; i <= Math.max(xnr, 1); i++) {
+                for(let j = 0; j <= Math.max(ynb, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    ctx.drawImage(this.__loadBgi.source, originX + i * w, originY + j * h, w, h);
+                  }
+                }
+              }
             }
-            // repeat-y
-            if(['repeat-y', 'repeat'].indexOf(backgroundRepeat) > -1) {}
             if(needMask) {
               ctx.globalCompositeOperation = 'destination-in';
               renderBgc(renderMode, '#FFF', x2, y2, iw, ih, ctx, this);
@@ -636,6 +694,71 @@ class Xom extends Node {
               tagName: 'image',
               props,
             });
+            // 4个角repeat
+            if(xnl > 0 || ynt > 0) {
+              for(let i = 0; i <= Math.max(xnl, 1); i++) {
+                for(let j = 0; j <= Math.max(ynt, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    let clone = util.clone(props);
+                    clone[1][1] = originX - i * w;
+                    clone[2][1] = originY - j * h;
+                    this.virtualDom.bb.push({
+                      type: 'img',
+                      tagName: 'image',
+                      props: clone,
+                    });
+                  }
+                }
+              }
+            }
+            if(xnr > 0 || ynt > 0) {
+              for(let i = 0; i <= Math.max(xnr, 1); i++) {
+                for(let j = 0; j <= Math.max(ynt, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    let clone = util.clone(props);
+                    clone[1][1] = originX + i * w;
+                    clone[2][1] = originY - j * h;
+                    this.virtualDom.bb.push({
+                      type: 'img',
+                      tagName: 'image',
+                      props: clone,
+                    });
+                  }
+                }
+              }
+            }
+            if(xnl > 0 || ynb > 0) {
+              for(let i = 0; i <= Math.max(xnl, 1); i++) {
+                for(let j = 0; j <= Math.max(ynb, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    let clone = util.clone(props);
+                    clone[1][1] = originX - i * w;
+                    clone[2][1] = originY + j * h;
+                    this.virtualDom.bb.push({
+                      type: 'img',
+                      tagName: 'image',
+                      props: clone,
+                    });
+                  }
+                }
+              }
+            }
+            if(xnr > 0 || ynb > 0) {
+              for(let i = 0; i <= Math.max(xnr, 1); i++) {
+                for(let j = 0; j <= Math.max(ynb, 1); j++) {
+                  if(i !== 0 || j !== 0) {
+                    let clone = util.clone(props);
+                    clone[1][1] = originX + i * w;
+                    clone[2][1] = originY + j * h;
+                    this.virtualDom.bb.push({
+                      type: 'img',
+                      tagName: 'image',
+                      props: clone,
+                    });
+                  }
+                }
+              }
+            }
           }
           computedStyle.backgroudSize = `${w} ${h}`;
           computedStyle.backgroundPosition = `${originX} ${originY}`;

test/background-repeat-svg/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8"/>
+  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0"/>
+  <title>test</title>
+</head>
+<body>
+<div id="test"></div>
+<input id="base64" type="text" value=""/>
+<script src="../../index.js"></script>
+<script src="script.js"></script>
+</body>
+</html>

test/background-repeat-svg/script.jsx

@@ -0,0 +1,8 @@
+let o = karas.render(
+  <svg width="360" height="360">
+    <div style={{height:120,background:'#000 url(../image.png) repeat center'}}/>
+  </svg>,
+  '#test'
+);
+let input = document.querySelector('#base64');
+input.value = JSON.stringify(o.virtualDom);