cache bezier

CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## 2.1.1 (2021-12-05)
+
+### Features
+
+* cache Bezier
+
+
 ## 2.0.0 (2021-07-19)
 * Refactoring using WebGL.
 

example/image-preview/index.html

@@ -76,7 +76,7 @@
       hm.src = "https://hm.baidu.com/hm.js?e301069b9a5d63dcc7066a0a140f2195";
       var s = document.getElementsByTagName("script")[0]; 
       s.parentNode.insertBefore(hm, s);
-    })();</script><script defer="defer" src="test2.1.0.js"></script></head><h1>🌲image preview example</h1><h3>1.Generated by query selector</h3><h4>HTML:</h4><div class="code"><pre>
+    })();</script><script defer="defer" src="test2.1.1.js"></script></head><h1>🌲image preview example</h1><h3>1.Generated by query selector</h3><h4>HTML:</h4><div class="code"><pre>
         &lt;div class="imageWraper"&gt;
             &lt;img data-src="/testImage/main_body3.png" src="/testImage/main_body3.png"&gt;
             &lt;img data-src="/testImage/phone20190624.png" src="/testImage/phone20190624.png"&gt;

example/js/image-preview-iife.js

@@ -765,6 +765,7 @@ var imagePreviewModule = (function (exports) {
 
     var cubicBezier = (function () {
         function cubicBezier(x1, y1, x2, y2) {
+            this.cachedY = new Map();
             this.precision = 1e-5;
             this.p1 = {
                 x: x1,
@@ -824,7 +825,10 @@ var imagePreviewModule = (function (exports) {
             return t2;
         };
         cubicBezier.prototype.solve = function (x) {
-            return this.getY(this.solveCurveX(x));
+            if (!this.cachedY.get(x)) {
+                this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+            }
+            return this.cachedY.get(x);
         };
         return cubicBezier;
     }());
@@ -1342,7 +1346,8 @@ var imagePreviewModule = (function (exports) {
         };
         webGl.prototype.genPostion = function (width, height, index) {
             var _a;
-            var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+            var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+            var z = -(this.viewHeight) / (zNearHeight) - forDev;
             var viewWidth = this.viewWidth;
             var sideZAxis = z - (viewWidth - width) / 2;
             var positionsMap = [

package.json

@@ -1,13 +1,13 @@
 {
   "name": "image-preview",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "image-preview",
   "scripts": {
     "start": "webpack serve --open Chrome.exe --mode=development",
     "build": "node scripts/beforeBuild.js && npm run genModule",
     "compileTs": "tsc --project ./src",
     "buildTest": "webpack --mode=production",
-    "genModule": ".\\scripts\\genModule.cmd",
+    "genModule": "./scripts/genModule.sh",
     "release": "standard-version"
   },
   "repository": {

release/image-preview/image-preview-amd.js

@@ -764,6 +764,7 @@ define(['exports'], function (exports) { 'use strict';
 
     var cubicBezier = (function () {
         function cubicBezier(x1, y1, x2, y2) {
+            this.cachedY = new Map();
             this.precision = 1e-5;
             this.p1 = {
                 x: x1,
@@ -823,7 +824,10 @@ define(['exports'], function (exports) { 'use strict';
             return t2;
         };
         cubicBezier.prototype.solve = function (x) {
-            return this.getY(this.solveCurveX(x));
+            if (!this.cachedY.get(x)) {
+                this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+            }
+            return this.cachedY.get(x);
         };
         return cubicBezier;
     }());
@@ -1341,7 +1345,8 @@ define(['exports'], function (exports) { 'use strict';
         };
         webGl.prototype.genPostion = function (width, height, index) {
             var _a;
-            var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+            var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+            var z = -(this.viewHeight) / (zNearHeight) - forDev;
             var viewWidth = this.viewWidth;
             var sideZAxis = z - (viewWidth - width) / 2;
             var positionsMap = [

release/image-preview/image-preview-cjs.js

@@ -766,6 +766,7 @@ var matrix = {
 
 var cubicBezier = (function () {
     function cubicBezier(x1, y1, x2, y2) {
+        this.cachedY = new Map();
         this.precision = 1e-5;
         this.p1 = {
             x: x1,
@@ -825,7 +826,10 @@ var cubicBezier = (function () {
         return t2;
     };
     cubicBezier.prototype.solve = function (x) {
-        return this.getY(this.solveCurveX(x));
+        if (!this.cachedY.get(x)) {
+            this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+        }
+        return this.cachedY.get(x);
     };
     return cubicBezier;
 }());
@@ -1343,7 +1347,8 @@ var webGl = (function () {
     };
     webGl.prototype.genPostion = function (width, height, index) {
         var _a;
-        var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+        var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+        var z = -(this.viewHeight) / (zNearHeight) - forDev;
         var viewWidth = this.viewWidth;
         var sideZAxis = z - (viewWidth - width) / 2;
         var positionsMap = [

release/image-preview/image-preview-esm.js

@@ -762,6 +762,7 @@ var matrix = {
 
 var cubicBezier = (function () {
     function cubicBezier(x1, y1, x2, y2) {
+        this.cachedY = new Map();
         this.precision = 1e-5;
         this.p1 = {
             x: x1,
@@ -821,7 +822,10 @@ var cubicBezier = (function () {
         return t2;
     };
     cubicBezier.prototype.solve = function (x) {
-        return this.getY(this.solveCurveX(x));
+        if (!this.cachedY.get(x)) {
+            this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+        }
+        return this.cachedY.get(x);
     };
     return cubicBezier;
 }());
@@ -1339,7 +1343,8 @@ var webGl = (function () {
     };
     webGl.prototype.genPostion = function (width, height, index) {
         var _a;
-        var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+        var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+        var z = -(this.viewHeight) / (zNearHeight) - forDev;
         var viewWidth = this.viewWidth;
         var sideZAxis = z - (viewWidth - width) / 2;
         var positionsMap = [

release/image-preview/image-preview-iife.js

@@ -765,6 +765,7 @@ var imagePreviewModule = (function (exports) {
 
     var cubicBezier = (function () {
         function cubicBezier(x1, y1, x2, y2) {
+            this.cachedY = new Map();
             this.precision = 1e-5;
             this.p1 = {
                 x: x1,
@@ -824,7 +825,10 @@ var imagePreviewModule = (function (exports) {
             return t2;
         };
         cubicBezier.prototype.solve = function (x) {
-            return this.getY(this.solveCurveX(x));
+            if (!this.cachedY.get(x)) {
+                this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+            }
+            return this.cachedY.get(x);
         };
         return cubicBezier;
     }());
@@ -1342,7 +1346,8 @@ var imagePreviewModule = (function (exports) {
         };
         webGl.prototype.genPostion = function (width, height, index) {
             var _a;
-            var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+            var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+            var z = -(this.viewHeight) / (zNearHeight) - forDev;
             var viewWidth = this.viewWidth;
             var sideZAxis = z - (viewWidth - width) / 2;
             var positionsMap = [

release/image-preview/image-preview-umd.js

@@ -768,6 +768,7 @@
 
     var cubicBezier = (function () {
         function cubicBezier(x1, y1, x2, y2) {
+            this.cachedY = new Map();
             this.precision = 1e-5;
             this.p1 = {
                 x: x1,
@@ -827,7 +828,10 @@
             return t2;
         };
         cubicBezier.prototype.solve = function (x) {
-            return this.getY(this.solveCurveX(x));
+            if (!this.cachedY.get(x)) {
+                this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+            }
+            return this.cachedY.get(x);
         };
         return cubicBezier;
     }());
@@ -1345,7 +1349,8 @@
         };
         webGl.prototype.genPostion = function (width, height, index) {
             var _a;
-            var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+            var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+            var z = -(this.viewHeight) / (zNearHeight) - forDev;
             var viewWidth = this.viewWidth;
             var sideZAxis = z - (viewWidth - width) / 2;
             var positionsMap = [

release/source/animation/animateJs.js

@@ -1,5 +1,6 @@
 var cubicBezier = (function () {
     function cubicBezier(x1, y1, x2, y2) {
+        this.cachedY = new Map();
         this.precision = 1e-5;
         this.p1 = {
             x: x1,
@@ -61,7 +62,10 @@ var cubicBezier = (function () {
         return t2;
     };
     cubicBezier.prototype.solve = function (x) {
-        return this.getY(this.solveCurveX(x));
+        if (!this.cachedY.get(x)) {
+            this.cachedY.set(x, this.getY(this.solveCurveX(x)));
+        }
+        return this.cachedY.get(x);
     };
     return cubicBezier;
 }());

release/source/webgl/index.js

@@ -310,7 +310,8 @@ var webGl = (function () {
     };
     webGl.prototype.genPostion = function (width, height, index) {
         var _a;
-        var z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+        var zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+        var z = -(this.viewHeight) / (zNearHeight) - forDev;
         var viewWidth = this.viewWidth;
         var sideZAxis = z - (viewWidth - width) / 2;
         var positionsMap = [

scripts/genModule.sh

@@ -0,0 +1,5 @@
+#!/bin/bash
+cd scripts 
+node generateModule.js
+cd ..
+cp './release/image-preview/image-preview-iife.js'  './example/js/'

scripts/generateModule.js

@@ -7,9 +7,9 @@ try{
     function compile(index,mini){
         let mod = moduler[index];
         let mininame = mini ? '-min': ''; 
-        let filename = `${releasePath}\\image-preview-${mod}${mininame}.js`;
+        let filename = `${releasePath}/image-preview-${mod}${mininame}.js`;
         let miniParam = mini ? '--compact' : '';
-        childProcess.exec(`..\\node_modules\\.bin\\rollup -c -f ${mod} -o ${filename} ${miniParam}`,(err,stdout)=>{
+        childProcess.exec(`../node_modules/.bin/rollup -c -f ${mod} -o ${filename} ${miniParam}`,(err,stdout)=>{
             if(err){
                 console.log(err)
                 console.log('编译失败')

src/animation/animateJs.ts

@@ -12,6 +12,7 @@ type coordinate = {
 export class cubicBezier{
     p1: coordinate
     p2: coordinate
+    cachedY: Map<number,number> = new Map();
     precision = 1e-5;
     constructor(x1,y1,x2,y2){
         this.p1 = {
@@ -89,7 +90,10 @@ export class cubicBezier{
         return t2;
     }
     solve(x:number){
-        return this.getY( this.solveCurveX(x) )
+        if( !this.cachedY.get(x)){
+            this.cachedY.set(x,this.getY( this.solveCurveX(x) ))
+        }
+        return this.cachedY.get(x)
     }
 }
 export var linear = new cubicBezier(0, 0, 1, 1);

src/core/image-preview.ts

@@ -1,5 +1,5 @@
 /**
- * image-preview [2.1.0]
+ * image-preview [2.1.1]
  * author:zilong
  * https://github.com/daxiazilong
  * Released under the MIT License

src/webgl/index.ts

@@ -311,7 +311,12 @@ class webGl {
         })
     }
     genPostion(width: number, height: number,index:number) {
-        const z = -(this.viewHeight) / (2 * Math.tan(this.fieldOfViewInRadians / 2)) - forDev;
+        //  zNearHeight = zNear * 2tan
+        // z           zNear
+        // -         =  -            => z = viewHeight / 2tan
+        // viewHeight  zNearHeight
+        const zNearHeight = (2 * Math.tan(this.fieldOfViewInRadians / 2));
+        const z = -(this.viewHeight) / (zNearHeight) - forDev;
         const viewWidth = this.viewWidth;
 
         let sideZAxis = z - ( viewWidth - width ) / 2;