fix: cacheFilter偏移 #87

index.js

@@ -13902,26 +13902,30 @@
 
   };
 
-  function genOffScreenBlur(cache, v, bboxTotal) {
-    var _cache$coords = _slicedToArray(cache.coords, 2),
-        x = _cache$coords[0],
-        y = _cache$coords[1],
-        size = cache.size,
-        canvas = cache.canvas,
-        x1 = cache.x1,
-        y1 = cache.y1;
+  function genOffScreenBlur(cacheTotal, v, bboxTotal) {
+    var _cacheTotal$coords = _slicedToArray(cacheTotal.coords, 2),
+        x = _cacheTotal$coords[0],
+        y = _cacheTotal$coords[1],
+        size = cacheTotal.size,
+        canvas = cacheTotal.canvas,
+        x1 = cacheTotal.x1,
+        y1 = cacheTotal.y1,
+        bx = cacheTotal.bx,
+        by = cacheTotal.by;
 
     var dx = x1 - bboxTotal[0];
     var dy = y1 - bboxTotal[1];
     var offScreen = inject.getCacheCanvas(size, size);
-    offScreen.ctx.drawImage(canvas, x - 1, y - 1, size, size, dx - 1, dy - 1, size, size);
+    offScreen.ctx.drawImage(canvas, x - 1, y - 1, size, size, dx - 1 + bx, dy - 1 + by, size, size);
     offScreen.draw();
     var cacheFilter = inject.getCacheWebgl(size, size);
     blur.gaussBlur(offScreen, cacheFilter, v, size, size);
     cacheFilter.x1 = x1;
     cacheFilter.y1 = y1;
     cacheFilter.dx = dx;
     cacheFilter.dy = dy;
+    cacheFilter.bx = bx;
+    cacheFilter.by = by;
     return cacheFilter;
   }
 
@@ -15451,14 +15455,14 @@
               sy = this.sy; // 缓存可用时各children依次执行进行离屏汇总
 
           if (cacheTotal && cacheTotal.enabled) {
-            var bx = sx - bboxTotal[0]; // dom原点和bbox原点的差值
+            var bx = cacheTotal.bx = sx - bboxTotal[0]; // dom原点和bbox原点的差值
 
-            var by = sy - bboxTotal[1];
+            var by = cacheTotal.by = sy - bboxTotal[1];
 
             var _cacheTotal = cacheTotal,
-                _cacheTotal$coords = _slicedToArray(_cacheTotal.coords, 2),
-                _tx = _cacheTotal$coords[0],
-                _ty = _cacheTotal$coords[1];
+                _cacheTotal$coords2 = _slicedToArray(_cacheTotal.coords, 2),
+                _tx = _cacheTotal$coords2[0],
+                _ty = _cacheTotal$coords2[1];
 
             var dx, dy, _x, _y, coords;
 
@@ -15493,14 +15497,14 @@
               ctx.setTransform([1, 0, 0, 1, 0, 0]);
               ctx.globalAlpha = 1;
 
-              _get(_getPrototypeOf(Dom.prototype), "__applyCache", this).call(this, renderMode, lv, ctx, _tx - 1 + bx, _ty - 1 + by);
+              _get(_getPrototypeOf(Dom.prototype), "__applyCache", this).call(this, renderMode, lv, ctx, _tx - 1, _ty - 1);
 
               zIndexChildren.forEach(function (item) {
                 ctx.setTransform([1, 0, 0, 1, 0, 0]);
                 ctx.globalAlpha = 1;
 
                 if (item instanceof Text || item instanceof Component$1 && item.shadowRoot instanceof Text) {
-                  item.__renderByMask(renderMode, null, ctx, null, dx + bx, dy + by);
+                  item.__renderByMask(renderMode, null, ctx, null, dx, dy);
                 } else {
                   item.__applyCache(renderMode, item.__refreshLevel, ctx, MODE.CHILD, _tx + bx, _ty + by, _x, _y, 1, [1, 0, 0, 1, 0, 0]);
                 }
@@ -15538,9 +15542,9 @@
 
               var parent = this.domParent;
 
-              var _dx2 = this.sx - parent.sx;
+              var _dx2 = this.sx - parent.sx + cacheFilter.dx;
 
-              var _dy2 = this.sy - parent.sy; // 非top的缓存以top为起点matrix单位，top会设置总的matrixEvent，opacity也是
+              var _dy2 = this.sy - parent.sy + cacheFilter.dy; // 非top的缓存以top为起点matrix单位，top会设置总的matrixEvent，opacity也是
 
 
               matrix = mx.multiply(matrix, this.matrix);
@@ -15549,7 +15553,8 @@
               (_ctx = ctx).setTransform.apply(_ctx, _toConsumableArray(matrix));
 
               ctx.globalAlpha = opacity;
-              ctx.drawImage(cacheFilter.canvas, tx + _dx2 + cacheFilter.dx, ty + _dy2 + cacheFilter.dy);
+              console.log(_dx2, _dy2, cacheFilter);
+              ctx.drawImage(cacheFilter.canvas, tx + _dx2 - cacheFilter.bx * 2, ty + _dy2 - cacheFilter.by * 2);
               return;
             }
 
@@ -15601,9 +15606,9 @@
               _dx = cache.dx;
               _dy = cache.dy;
 
-              var _cache$coords2 = _slicedToArray(cache.coords, 2),
-                  _x2 = _cache$coords2[0],
-                  _y2 = _cache$coords2[1];
+              var _cache$coords = _slicedToArray(cache.coords, 2),
+                  _x2 = _cache$coords[0],
+                  _y2 = _cache$coords[1];
 
               ox = _sx2 - x1;
               oy = _sy2 - y1;

src/node/Dom.js

@@ -23,19 +23,21 @@ const MODE = {
   CHILD: 2, // 局部根节点的子节点汇总渲染
 };
 
-function genOffScreenBlur(cache, v, bboxTotal) {
-  let { coords: [x, y], size, canvas, x1, y1 } = cache;
+function genOffScreenBlur(cacheTotal, v, bboxTotal) {
+  let { coords: [x, y], size, canvas, x1, y1, bx, by } = cacheTotal;
   let dx = x1 - bboxTotal[0];
   let dy = y1 - bboxTotal[1];
   let offScreen = inject.getCacheCanvas(size, size);
-  offScreen.ctx.drawImage(canvas, x - 1, y - 1, size, size, dx - 1, dy - 1, size, size);
+  offScreen.ctx.drawImage(canvas, x - 1, y - 1, size, size, dx - 1 + bx, dy - 1 + by, size, size);
   offScreen.draw();
   let cacheFilter = inject.getCacheWebgl(size, size);
   blur.gaussBlur(offScreen, cacheFilter, v, size, size);
   cacheFilter.x1 = x1;
   cacheFilter.y1 = y1;
   cacheFilter.dx = dx;
   cacheFilter.dy = dy;
+  cacheFilter.bx = bx;
+  cacheFilter.by = by;
   return cacheFilter;
 }
 
@@ -1368,8 +1370,8 @@ class Dom extends Xom {
       let { sx, sy } = this;
       // 缓存可用时各children依次执行进行离屏汇总
       if(cacheTotal && cacheTotal.enabled) {
-        let bx = sx - bboxTotal[0]; // dom原点和bbox原点的差值
-        let by = sy - bboxTotal[1];
+        let bx = cacheTotal.bx = sx - bboxTotal[0]; // dom原点和bbox原点的差值
+        let by = cacheTotal.by = sy - bboxTotal[1];
         let { coords: [tx, ty] } = cacheTotal;
         let dx, dy, x1, y1, coords;
         if(cache) {
@@ -1401,12 +1403,12 @@ class Dom extends Xom {
           ctx = cacheTotal.ctx;
           ctx.setTransform([1, 0, 0, 1, 0, 0]);
           ctx.globalAlpha = 1;
-          super.__applyCache(renderMode, lv, ctx, tx - 1 + bx, ty - 1 + by);
+          super.__applyCache(renderMode, lv, ctx, tx - 1, ty - 1);
           zIndexChildren.forEach(item => {
             ctx.setTransform([1, 0, 0, 1, 0, 0]);
             ctx.globalAlpha = 1;
             if(item instanceof Text || item instanceof Component && item.shadowRoot instanceof Text) {
-              item.__renderByMask(renderMode, null, ctx, null, dx + bx, dy + by);
+              item.__renderByMask(renderMode, null, ctx, null, dx, dy);
             }
             else {
               item.__applyCache(renderMode, item.__refreshLevel, ctx, MODE.CHILD, tx + bx, ty + by, x1, y1, 1, [1, 0, 0, 1, 0, 0]);
@@ -1441,14 +1443,14 @@ class Dom extends Xom {
       // 优先filter
       if(cacheFilter) {
         let parent = this.domParent;
-        let dx = this.sx - parent.sx;
-        let dy = this.sy - parent.sy;
+        let dx = this.sx - parent.sx + cacheFilter.dx;
+        let dy = this.sy - parent.sy + cacheFilter.dy;
         // 非top的缓存以top为起点matrix单位，top会设置总的matrixEvent，opacity也是
         matrix = mx.multiply(matrix, this.matrix);
         opacity *= computedStyle.opacity;
         ctx.setTransform(...matrix);
-        ctx.globalAlpha = opacity;
-        ctx.drawImage(cacheFilter.canvas, tx + dx + cacheFilter.dx, ty + dy + cacheFilter.dy);
+        ctx.globalAlpha = opacity; console.log(dx,dy,cacheFilter)
+        ctx.drawImage(cacheFilter.canvas, tx + dx - cacheFilter.bx * 2, ty + dy - cacheFilter.by * 2);
         return;
       }
       matrix = mx.multiply(matrix, this.matrix);

test/cache-cache-filter/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/cache-cache-filter/script.jsx

@@ -0,0 +1,8 @@
+let o = karas.render(
+  <canvas width="360" height="360" cache={true}>
+    <div style={{margin:50,background:'#F00',filter:'blur(1)'}} ref="div">
+      <span ref="span">123</span>
+    </div>
+  </canvas>,
+  '#test'
+);

test/cache-complex-update/index.html

@@ -0,0 +1,15 @@
+<!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>
+<script src="../base64.js"></script>
+</body>
+</html>

test/cache-complex-update/script.jsx

@@ -0,0 +1,18 @@
+let o = karas.render(
+  <canvas width="360" height="360" cache={true}>
+    <div style={{position:'relative',background:'#F00',width:40}} ref="div">
+      <span ref="span" style={{padding:2,background:'#00F',translateX:-10,translateY:10}}>123</span>
+    </div>
+  </canvas>,
+  '#test'
+);
+
+o.ref.span.updateStyle({
+  opacity: 0.5,
+  background:'#0F0',
+  rotateZ: 60,
+}, function() {
+  let canvas = document.querySelector('canvas');
+  let input = document.querySelector('#base64');
+  input.value = canvas.toDataURL();
+});