├── .gitignore ├── .DS_Store ├── src ├── .DS_Store ├── example │ ├── index.html │ └── index.js └── index.js ├── README.md ├── yarn.lock ├── package.json └── lib ├── index.es.js ├── index.common.js └── index.umd.js /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viewerw/pipcanvas/HEAD/.DS_Store -------------------------------------------------------------------------------- /src/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/viewerw/pipcanvas/HEAD/src/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # pipcanvas 2 | [新的地址](https://viewerw.github.io/react-components/react-pip) 3 | -------------------------------------------------------------------------------- /src/example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 | 13 | 14 | 15 | 16 |

加载中。。。

17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /yarn.lock: -------------------------------------------------------------------------------- 1 | # THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. 2 | # yarn lockfile v1 3 | 4 | 5 | "@types/estree@0.0.39": 6 | version "0.0.39" 7 | resolved "http://registry.npm.taobao.org/@types/estree/download/@types/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f" 8 | integrity sha1-4Xfmme4bjCLSMXTKqnQiZEOJUJ8= 9 | 10 | "@types/node@*": 11 | version "10.12.0" 12 | resolved "http://registry.npm.taobao.org/@types/node/download/@types/node-10.12.0.tgz#ea6dcbddbc5b584c83f06c60e82736d8fbb0c235" 13 | integrity sha1-6m3L3bxbWEyD8Gxg6Cc22PuwwjU= 14 | 15 | rollup@^0.66.6: 16 | version "0.66.6" 17 | resolved "http://registry.npm.taobao.org/rollup/download/rollup-0.66.6.tgz#ce7d6185beb7acea644ce220c25e71ae03275482" 18 | integrity sha1-zn1hhb63rOpkTOIgwl5xrgMnVII= 19 | dependencies: 20 | "@types/estree" "0.0.39" 21 | "@types/node" "*" 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "pipcanvas", 3 | "version": "1.0.0", 4 | "description": "fast init a picture-in-picture animation page", 5 | "main": "lib/index.umd.js", 6 | "module": "lib/index.es.js", 7 | "scripts": { 8 | "start": "npm run dev", 9 | "dev": "rollup src/index.js --file lib/index.umd.js --format umd --name 'PipCanvas' --watch", 10 | "build": "npm run build-umd && npm run build-es && npm run build-common", 11 | "build-umd": "rollup src/index.js --file lib/index.umd.js --format umd --name 'PipCanvas'", 12 | "build-es": "rollup src/index.js --file lib/index.es.js --format es ", 13 | "build-common": "rollup src/index.js --file lib/index.common.js --format cjs ", 14 | "test": "echo \"Error: no test specified\" && exit 1" 15 | }, 16 | "keywords": [ 17 | "pip", 18 | "canvas" 19 | ], 20 | "author": "viewerw", 21 | "license": "ISC", 22 | "dependencies": {}, 23 | "devDependencies": { 24 | "rollup": "^0.66.6" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/example/index.js: -------------------------------------------------------------------------------- 1 | var pipCanvas = new PipCanvas({ 2 | imgList: [ 3 | { 4 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/cover_v2.jpg', 5 | imgW: '750', 6 | imgH: '1206', 7 | }, 8 | { 9 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p1.jpg', 10 | imgW: '1875', 11 | imgH: '3015', 12 | areaW: '152', 13 | areaH: '244', 14 | areaL: '370', 15 | areaT: '1068', 16 | gif: 'p1', 17 | }, 18 | { 19 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p2.jpg', 20 | imgW: '1875', 21 | imgH: '3015', 22 | areaW: '556', 23 | areaH: '894', 24 | areaL: '1251', 25 | areaT: '1050', 26 | }, 27 | { 28 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p3.jpg', 29 | imgW: '1875', 30 | imgH: '3015', 31 | areaW: '166', 32 | areaH: '267', 33 | areaL: '114', 34 | areaT: '897', 35 | }, 36 | { 37 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p4.jpg', 38 | imgW: '1875', 39 | imgH: '3015', 40 | areaW: '194', 41 | areaH: '312', 42 | areaL: '85', 43 | areaT: '1402', 44 | gif: 'p4', 45 | }, 46 | { 47 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p5.jpg', 48 | imgW: '1875', 49 | imgH: '3015', 50 | areaW: '102', 51 | areaH: '164', 52 | areaL: '315', 53 | areaT: '2188', 54 | }, 55 | { 56 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p6.jpg', 57 | imgW: '1875', 58 | imgH: '3015', 59 | areaW: '280', 60 | areaH: '450', 61 | areaL: '441', 62 | areaT: '467', 63 | gif: 'p6', 64 | }, 65 | { 66 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p7.jpg', 67 | imgW: '1875', 68 | imgH: '3015', 69 | areaW: '79', 70 | areaH: '127', 71 | areaL: '501', 72 | areaT: '2514', 73 | gif: 'p7', 74 | }, 75 | { 76 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p8.jpg', 77 | imgW: '1875', 78 | imgH: '3015', 79 | areaW: '176', 80 | areaH: '283', 81 | areaL: '1582', 82 | areaT: '1084', 83 | }, 84 | { 85 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p9.jpg', 86 | imgW: '1875', 87 | imgH: '3015', 88 | areaW: '173', 89 | areaH: '278', 90 | areaL: '1472', 91 | areaT: '1357', 92 | gif: 'p9', 93 | }, 94 | { 95 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p10_1.jpg', 96 | imgW: '1875', 97 | imgH: '3015', 98 | areaW: '179', 99 | areaH: '287', 100 | areaL: '516', 101 | areaT: '1459', 102 | }, 103 | { 104 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p10.jpg', 105 | imgW: '1875', 106 | imgH: '3015', 107 | areaW: '769', 108 | areaH: '1237', 109 | areaL: '558', 110 | areaT: '873', 111 | }, 112 | { 113 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p11.jpg', 114 | imgW: '1875', 115 | imgH: '3015', 116 | areaW: '112', 117 | areaH: '181', 118 | areaL: '881', 119 | areaT: '1938', 120 | }, 121 | { 122 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p12.jpg', 123 | imgW: '1875', 124 | imgH: '3015', 125 | areaW: '328', 126 | areaH: '528', 127 | areaL: '706', 128 | areaT: '314', 129 | }, 130 | { 131 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p13.jpg', 132 | imgW: '1875', 133 | imgH: '3015', 134 | areaW: '132', 135 | areaH: '213', 136 | areaL: '1184', 137 | areaT: '908', 138 | }, 139 | { 140 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p14.jpg', 141 | imgW: '1875', 142 | imgH: '3015', 143 | areaW: '82', 144 | areaH: '132', 145 | areaL: '206', 146 | areaT: '2092', 147 | }, 148 | { 149 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p15.jpg', 150 | imgW: '1875', 151 | imgH: '3015', 152 | areaW: '246', 153 | areaH: '396', 154 | areaL: '598', 155 | areaT: '1270', 156 | }, 157 | { 158 | link: 'http://static.ws.126.net/f2e/ent/ent_painting2017/images/p16.jpg', 159 | imgW: '1875', 160 | imgH: '3015', 161 | areaW: '76', 162 | areaH: '122', 163 | areaL: '462', 164 | areaT: '2558', 165 | }, 166 | ], 167 | el: '#container', 168 | }); 169 | pipCanvas.init(); 170 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export default class PipCanvas { 2 | constructor({ 3 | el, 4 | imgList = [], 5 | radio = 1, 6 | index = 0, 7 | scale = 0.99, 8 | scaleReturn = 0.8, 9 | w = 750, 10 | h = 1206, 11 | gif_timer = null, 12 | gifImgs = [], 13 | }) { 14 | this.imgList = imgList; 15 | this.radio = radio; 16 | this.index = index; 17 | this.scale = scale; 18 | this.scaleReturn = scaleReturn; 19 | this.w = w; 20 | this.h = h; 21 | this.gif_timer = gif_timer; 22 | this.gifImgs = gifImgs; 23 | this.canvas = $(el)[0]; 24 | this.ctx = this.canvas.getContext('2d'); 25 | } 26 | loadGifImg() { 27 | const loadPromises = this.gifImgs.map( 28 | item => 29 | new Promise((resolve, reject) => { 30 | const img = new Image(); 31 | img.src = item; 32 | img.onload = () => resolve(img); 33 | img.onerror = () => reject(); 34 | }), 35 | ); 36 | return Promise.all(loadPromises); 37 | } 38 | loadPageImg() { 39 | const loadPromises = this.imgList.map( 40 | (item, index) => 41 | new Promise((resolve, reject) => { 42 | const img = new Image(); 43 | img.src = item.link; 44 | img.i = index; 45 | img.name = index; 46 | img.className = 'item'; 47 | item.image = img; 48 | img.onload = () => { 49 | $('.collection').append(item.image); 50 | resolve(); 51 | }; 52 | img.onerror = () => reject(); 53 | }), 54 | ); 55 | return Promise.all(loadPromises); 56 | } 57 | async init() { 58 | console.log('init', new Date().getTime()); 59 | await this.loadPageImg(); 60 | if (this.gifImgs.length > 0) { 61 | await this.loadGifImg(); 62 | } 63 | console.log('loadimg', new Date().getTime()); 64 | this.domList = $('.collection .item').sort(function(i, t) { 65 | return i.name - t.name; 66 | }); 67 | this.containerImage = this.domList[this.index + 1]; 68 | this.innerImage = this.domList[this.index]; 69 | this.draw(); 70 | document.addEventListener('touchstart', this.touchHandler.bind(this)); 71 | document.addEventListener('touchend', this.touchendHandler.bind(this)); 72 | } 73 | touchHandler(e) { 74 | e.stopPropagation(); 75 | // e.preventDefault(); 76 | const render = () => { 77 | this.radio = this.radio * this.scale; 78 | this.timer = requestAnimationFrame(render); 79 | this.draw(); 80 | }; 81 | cancelAnimationFrame(this.timer); 82 | this.willPause = false; 83 | // clearInterval(this.gif_timer); 84 | this.timer = requestAnimationFrame(render); 85 | } 86 | touchendHandler(e) { 87 | e.stopPropagation(); 88 | // e.preventDefault(); 89 | if (this.imgList[this.index + 1] && this.imgList[this.index + 1].gif) { 90 | this.willPause = true; 91 | } else { 92 | this.willPause = false; 93 | cancelAnimationFrame(this.timer); 94 | } 95 | } 96 | draw() { 97 | if (this.index + 1 != this.imgList.length) { 98 | if ( 99 | this.radio < 100 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW 101 | ) { 102 | if (this.willPause) { 103 | this.radio = 104 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW; 105 | cancelAnimationFrame(this.timer); 106 | } 107 | this.index++; 108 | this.radio = 1; 109 | if (!this.imgList[this.index + 1]) { 110 | this.showEnd(); 111 | } 112 | } 113 | this.imgNext = this.imgList[this.index + 1]; 114 | this.imgCur = this.imgList[this.index]; 115 | this.containerImage = this.domList[this.index + 1]; 116 | this.innerImage = this.domList[this.index]; 117 | this.drawImgOversize( 118 | this.containerImage, 119 | this.imgNext.imgW, 120 | this.imgNext.imgH, 121 | this.imgNext.areaW, 122 | this.imgNext.areaH, 123 | this.imgNext.areaL, 124 | this.imgNext.areaT, 125 | this.radio, 126 | ), 127 | this.drawImgMinisize( 128 | this.innerImage, 129 | this.imgCur.imgW, 130 | this.imgCur.imgH, 131 | this.imgNext.imgW, 132 | this.imgNext.imgH, 133 | this.imgNext.areaW, 134 | this.imgNext.areaH, 135 | this.imgNext.areaL, 136 | this.imgNext.areaT, 137 | this.radio, 138 | ); 139 | } 140 | } 141 | showEnd() { 142 | console.log('end'); 143 | } 144 | drawImgOversize(i, t, e, a, s, n, g, r) { 145 | this.ctx.drawImage( 146 | i, 147 | n - (a / r - a) * (n / (t - a)), 148 | g - (s / r - s) * (g / (e - s)), 149 | a / r, 150 | s / r, 151 | 0, 152 | 0, 153 | 750, 154 | 1206, 155 | ); 156 | } 157 | drawImgMinisize(i, t, e, a, s, n, g, r, m, h) { 158 | this.ctx.drawImage( 159 | i, 160 | 0, 161 | 0, 162 | t, 163 | e, 164 | ((n / h - n) * (r / (a - n)) * h * 750) / n, 165 | ((g / h - g) * (m / (s - g)) * h * 1206) / g, 166 | 750 * h, 167 | 1206 * h, 168 | ); 169 | } 170 | drawSprite(i, t, e, a, s, n, g) { 171 | var r = s[a]; 172 | this.ctx.drawImage(i, r[0], r[1], r[2], r[3], t, e, n, g); 173 | } 174 | } 175 | -------------------------------------------------------------------------------- /lib/index.es.js: -------------------------------------------------------------------------------- 1 | class PipCanvas { 2 | constructor({ 3 | el, 4 | imgList = [], 5 | radio = 1, 6 | index = 0, 7 | scale = 0.99, 8 | scaleReturn = 0.8, 9 | w = 750, 10 | h = 1206, 11 | gif_timer = null, 12 | gifImgs = [], 13 | }) { 14 | this.imgList = imgList; 15 | this.radio = radio; 16 | this.index = index; 17 | this.scale = scale; 18 | this.scaleReturn = scaleReturn; 19 | this.w = w; 20 | this.h = h; 21 | this.gif_timer = gif_timer; 22 | this.gifImgs = gifImgs; 23 | this.canvas = $(el)[0]; 24 | this.ctx = this.canvas.getContext('2d'); 25 | } 26 | loadGifImg() { 27 | const loadPromises = this.gifImgs.map( 28 | item => 29 | new Promise((resolve, reject) => { 30 | const img = new Image(); 31 | img.src = item; 32 | img.onload = () => resolve(img); 33 | img.onerror = () => reject(); 34 | }), 35 | ); 36 | return Promise.all(loadPromises); 37 | } 38 | loadPageImg() { 39 | const loadPromises = this.imgList.map( 40 | (item, index) => 41 | new Promise((resolve, reject) => { 42 | const img = new Image(); 43 | img.src = item.link; 44 | img.i = index; 45 | img.name = index; 46 | img.className = 'item'; 47 | item.image = img; 48 | img.onload = () => { 49 | $('.collection').append(item.image); 50 | resolve(); 51 | }; 52 | img.onerror = () => reject(); 53 | }), 54 | ); 55 | return Promise.all(loadPromises); 56 | } 57 | async init() { 58 | console.log('init', new Date().getTime()); 59 | await this.loadPageImg(); 60 | if (this.gifImgs.length > 0) { 61 | await this.loadGifImg(); 62 | } 63 | console.log('loadimg', new Date().getTime()); 64 | this.domList = $('.collection .item').sort(function(i, t) { 65 | return i.name - t.name; 66 | }); 67 | this.containerImage = this.domList[this.index + 1]; 68 | this.innerImage = this.domList[this.index]; 69 | this.draw(); 70 | document.addEventListener('touchstart', this.touchHandler.bind(this)); 71 | document.addEventListener('touchend', this.touchendHandler.bind(this)); 72 | } 73 | touchHandler(e) { 74 | e.stopPropagation(); 75 | // e.preventDefault(); 76 | const render = () => { 77 | this.radio = this.radio * this.scale; 78 | this.timer = requestAnimationFrame(render); 79 | this.draw(); 80 | }; 81 | cancelAnimationFrame(this.timer); 82 | this.willPause = false; 83 | // clearInterval(this.gif_timer); 84 | this.timer = requestAnimationFrame(render); 85 | } 86 | touchendHandler(e) { 87 | e.stopPropagation(); 88 | // e.preventDefault(); 89 | if (this.imgList[this.index + 1] && this.imgList[this.index + 1].gif) { 90 | this.willPause = true; 91 | } else { 92 | this.willPause = false; 93 | cancelAnimationFrame(this.timer); 94 | } 95 | } 96 | draw() { 97 | if (this.index + 1 != this.imgList.length) { 98 | if ( 99 | this.radio < 100 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW 101 | ) { 102 | if (this.willPause) { 103 | this.radio = 104 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW; 105 | cancelAnimationFrame(this.timer); 106 | } 107 | this.index++; 108 | this.radio = 1; 109 | if (!this.imgList[this.index + 1]) { 110 | this.showEnd(); 111 | } 112 | } 113 | this.imgNext = this.imgList[this.index + 1]; 114 | this.imgCur = this.imgList[this.index]; 115 | this.containerImage = this.domList[this.index + 1]; 116 | this.innerImage = this.domList[this.index]; 117 | this.drawImgOversize( 118 | this.containerImage, 119 | this.imgNext.imgW, 120 | this.imgNext.imgH, 121 | this.imgNext.areaW, 122 | this.imgNext.areaH, 123 | this.imgNext.areaL, 124 | this.imgNext.areaT, 125 | this.radio, 126 | ), 127 | this.drawImgMinisize( 128 | this.innerImage, 129 | this.imgCur.imgW, 130 | this.imgCur.imgH, 131 | this.imgNext.imgW, 132 | this.imgNext.imgH, 133 | this.imgNext.areaW, 134 | this.imgNext.areaH, 135 | this.imgNext.areaL, 136 | this.imgNext.areaT, 137 | this.radio, 138 | ); 139 | } 140 | } 141 | showEnd() { 142 | console.log('end'); 143 | } 144 | drawImgOversize(i, t, e, a, s, n, g, r) { 145 | this.ctx.drawImage( 146 | i, 147 | n - (a / r - a) * (n / (t - a)), 148 | g - (s / r - s) * (g / (e - s)), 149 | a / r, 150 | s / r, 151 | 0, 152 | 0, 153 | 750, 154 | 1206, 155 | ); 156 | } 157 | drawImgMinisize(i, t, e, a, s, n, g, r, m, h) { 158 | this.ctx.drawImage( 159 | i, 160 | 0, 161 | 0, 162 | t, 163 | e, 164 | ((n / h - n) * (r / (a - n)) * h * 750) / n, 165 | ((g / h - g) * (m / (s - g)) * h * 1206) / g, 166 | 750 * h, 167 | 1206 * h, 168 | ); 169 | } 170 | drawSprite(i, t, e, a, s, n, g) { 171 | var r = s[a]; 172 | this.ctx.drawImage(i, r[0], r[1], r[2], r[3], t, e, n, g); 173 | } 174 | } 175 | 176 | export default PipCanvas; 177 | -------------------------------------------------------------------------------- /lib/index.common.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | class PipCanvas { 4 | constructor({ 5 | el, 6 | imgList = [], 7 | radio = 1, 8 | index = 0, 9 | scale = 0.99, 10 | scaleReturn = 0.8, 11 | w = 750, 12 | h = 1206, 13 | gif_timer = null, 14 | gifImgs = [], 15 | }) { 16 | this.imgList = imgList; 17 | this.radio = radio; 18 | this.index = index; 19 | this.scale = scale; 20 | this.scaleReturn = scaleReturn; 21 | this.w = w; 22 | this.h = h; 23 | this.gif_timer = gif_timer; 24 | this.gifImgs = gifImgs; 25 | this.canvas = $(el)[0]; 26 | this.ctx = this.canvas.getContext('2d'); 27 | } 28 | loadGifImg() { 29 | const loadPromises = this.gifImgs.map( 30 | item => 31 | new Promise((resolve, reject) => { 32 | const img = new Image(); 33 | img.src = item; 34 | img.onload = () => resolve(img); 35 | img.onerror = () => reject(); 36 | }), 37 | ); 38 | return Promise.all(loadPromises); 39 | } 40 | loadPageImg() { 41 | const loadPromises = this.imgList.map( 42 | (item, index) => 43 | new Promise((resolve, reject) => { 44 | const img = new Image(); 45 | img.src = item.link; 46 | img.i = index; 47 | img.name = index; 48 | img.className = 'item'; 49 | item.image = img; 50 | img.onload = () => { 51 | $('.collection').append(item.image); 52 | resolve(); 53 | }; 54 | img.onerror = () => reject(); 55 | }), 56 | ); 57 | return Promise.all(loadPromises); 58 | } 59 | async init() { 60 | console.log('init', new Date().getTime()); 61 | await this.loadPageImg(); 62 | if (this.gifImgs.length > 0) { 63 | await this.loadGifImg(); 64 | } 65 | console.log('loadimg', new Date().getTime()); 66 | this.domList = $('.collection .item').sort(function(i, t) { 67 | return i.name - t.name; 68 | }); 69 | this.containerImage = this.domList[this.index + 1]; 70 | this.innerImage = this.domList[this.index]; 71 | this.draw(); 72 | document.addEventListener('touchstart', this.touchHandler.bind(this)); 73 | document.addEventListener('touchend', this.touchendHandler.bind(this)); 74 | } 75 | touchHandler(e) { 76 | e.stopPropagation(); 77 | // e.preventDefault(); 78 | const render = () => { 79 | this.radio = this.radio * this.scale; 80 | this.timer = requestAnimationFrame(render); 81 | this.draw(); 82 | }; 83 | cancelAnimationFrame(this.timer); 84 | this.willPause = false; 85 | // clearInterval(this.gif_timer); 86 | this.timer = requestAnimationFrame(render); 87 | } 88 | touchendHandler(e) { 89 | e.stopPropagation(); 90 | // e.preventDefault(); 91 | if (this.imgList[this.index + 1] && this.imgList[this.index + 1].gif) { 92 | this.willPause = true; 93 | } else { 94 | this.willPause = false; 95 | cancelAnimationFrame(this.timer); 96 | } 97 | } 98 | draw() { 99 | if (this.index + 1 != this.imgList.length) { 100 | if ( 101 | this.radio < 102 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW 103 | ) { 104 | if (this.willPause) { 105 | this.radio = 106 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW; 107 | cancelAnimationFrame(this.timer); 108 | } 109 | this.index++; 110 | this.radio = 1; 111 | if (!this.imgList[this.index + 1]) { 112 | this.showEnd(); 113 | } 114 | } 115 | this.imgNext = this.imgList[this.index + 1]; 116 | this.imgCur = this.imgList[this.index]; 117 | this.containerImage = this.domList[this.index + 1]; 118 | this.innerImage = this.domList[this.index]; 119 | this.drawImgOversize( 120 | this.containerImage, 121 | this.imgNext.imgW, 122 | this.imgNext.imgH, 123 | this.imgNext.areaW, 124 | this.imgNext.areaH, 125 | this.imgNext.areaL, 126 | this.imgNext.areaT, 127 | this.radio, 128 | ), 129 | this.drawImgMinisize( 130 | this.innerImage, 131 | this.imgCur.imgW, 132 | this.imgCur.imgH, 133 | this.imgNext.imgW, 134 | this.imgNext.imgH, 135 | this.imgNext.areaW, 136 | this.imgNext.areaH, 137 | this.imgNext.areaL, 138 | this.imgNext.areaT, 139 | this.radio, 140 | ); 141 | } 142 | } 143 | showEnd() { 144 | console.log('end'); 145 | } 146 | drawImgOversize(i, t, e, a, s, n, g, r) { 147 | this.ctx.drawImage( 148 | i, 149 | n - (a / r - a) * (n / (t - a)), 150 | g - (s / r - s) * (g / (e - s)), 151 | a / r, 152 | s / r, 153 | 0, 154 | 0, 155 | 750, 156 | 1206, 157 | ); 158 | } 159 | drawImgMinisize(i, t, e, a, s, n, g, r, m, h) { 160 | this.ctx.drawImage( 161 | i, 162 | 0, 163 | 0, 164 | t, 165 | e, 166 | ((n / h - n) * (r / (a - n)) * h * 750) / n, 167 | ((g / h - g) * (m / (s - g)) * h * 1206) / g, 168 | 750 * h, 169 | 1206 * h, 170 | ); 171 | } 172 | drawSprite(i, t, e, a, s, n, g) { 173 | var r = s[a]; 174 | this.ctx.drawImage(i, r[0], r[1], r[2], r[3], t, e, n, g); 175 | } 176 | } 177 | 178 | module.exports = PipCanvas; 179 | -------------------------------------------------------------------------------- /lib/index.umd.js: -------------------------------------------------------------------------------- 1 | (function (global, factory) { 2 | typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() : 3 | typeof define === 'function' && define.amd ? define(factory) : 4 | (global.PipCanvas = factory()); 5 | }(this, (function () { 'use strict'; 6 | 7 | class PipCanvas { 8 | constructor({ 9 | el, 10 | imgList = [], 11 | radio = 1, 12 | index = 0, 13 | scale = 0.99, 14 | scaleReturn = 0.8, 15 | w = 750, 16 | h = 1206, 17 | gif_timer = null, 18 | gifImgs = [], 19 | }) { 20 | this.imgList = imgList; 21 | this.radio = radio; 22 | this.index = index; 23 | this.scale = scale; 24 | this.scaleReturn = scaleReturn; 25 | this.w = w; 26 | this.h = h; 27 | this.gif_timer = gif_timer; 28 | this.gifImgs = gifImgs; 29 | this.canvas = $(el)[0]; 30 | this.ctx = this.canvas.getContext('2d'); 31 | } 32 | loadGifImg() { 33 | const loadPromises = this.gifImgs.map( 34 | item => 35 | new Promise((resolve, reject) => { 36 | const img = new Image(); 37 | img.src = item; 38 | img.onload = () => resolve(img); 39 | img.onerror = () => reject(); 40 | }), 41 | ); 42 | return Promise.all(loadPromises); 43 | } 44 | loadPageImg() { 45 | const loadPromises = this.imgList.map( 46 | (item, index) => 47 | new Promise((resolve, reject) => { 48 | const img = new Image(); 49 | img.src = item.link; 50 | img.i = index; 51 | img.name = index; 52 | img.className = 'item'; 53 | item.image = img; 54 | img.onload = () => { 55 | $('.collection').append(item.image); 56 | resolve(); 57 | }; 58 | img.onerror = () => reject(); 59 | }), 60 | ); 61 | return Promise.all(loadPromises); 62 | } 63 | async init() { 64 | console.log('init', new Date().getTime()); 65 | await this.loadPageImg(); 66 | if (this.gifImgs.length > 0) { 67 | await this.loadGifImg(); 68 | } 69 | console.log('loadimg', new Date().getTime()); 70 | this.domList = $('.collection .item').sort(function(i, t) { 71 | return i.name - t.name; 72 | }); 73 | this.containerImage = this.domList[this.index + 1]; 74 | this.innerImage = this.domList[this.index]; 75 | this.draw(); 76 | document.addEventListener('touchstart', this.touchHandler.bind(this)); 77 | document.addEventListener('touchend', this.touchendHandler.bind(this)); 78 | } 79 | touchHandler(e) { 80 | e.stopPropagation(); 81 | // e.preventDefault(); 82 | const render = () => { 83 | this.radio = this.radio * this.scale; 84 | this.timer = requestAnimationFrame(render); 85 | this.draw(); 86 | }; 87 | cancelAnimationFrame(this.timer); 88 | this.willPause = false; 89 | // clearInterval(this.gif_timer); 90 | this.timer = requestAnimationFrame(render); 91 | } 92 | touchendHandler(e) { 93 | e.stopPropagation(); 94 | // e.preventDefault(); 95 | if (this.imgList[this.index + 1] && this.imgList[this.index + 1].gif) { 96 | this.willPause = true; 97 | } else { 98 | this.willPause = false; 99 | cancelAnimationFrame(this.timer); 100 | } 101 | } 102 | draw() { 103 | if (this.index + 1 != this.imgList.length) { 104 | if ( 105 | this.radio < 106 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW 107 | ) { 108 | if (this.willPause) { 109 | this.radio = 110 | this.imgList[this.index + 1].areaW / this.imgList[this.index + 1].imgW; 111 | cancelAnimationFrame(this.timer); 112 | } 113 | this.index++; 114 | this.radio = 1; 115 | if (!this.imgList[this.index + 1]) { 116 | this.showEnd(); 117 | } 118 | } 119 | this.imgNext = this.imgList[this.index + 1]; 120 | this.imgCur = this.imgList[this.index]; 121 | this.containerImage = this.domList[this.index + 1]; 122 | this.innerImage = this.domList[this.index]; 123 | this.drawImgOversize( 124 | this.containerImage, 125 | this.imgNext.imgW, 126 | this.imgNext.imgH, 127 | this.imgNext.areaW, 128 | this.imgNext.areaH, 129 | this.imgNext.areaL, 130 | this.imgNext.areaT, 131 | this.radio, 132 | ), 133 | this.drawImgMinisize( 134 | this.innerImage, 135 | this.imgCur.imgW, 136 | this.imgCur.imgH, 137 | this.imgNext.imgW, 138 | this.imgNext.imgH, 139 | this.imgNext.areaW, 140 | this.imgNext.areaH, 141 | this.imgNext.areaL, 142 | this.imgNext.areaT, 143 | this.radio, 144 | ); 145 | } 146 | } 147 | showEnd() { 148 | console.log('end'); 149 | } 150 | drawImgOversize(i, t, e, a, s, n, g, r) { 151 | this.ctx.drawImage( 152 | i, 153 | n - (a / r - a) * (n / (t - a)), 154 | g - (s / r - s) * (g / (e - s)), 155 | a / r, 156 | s / r, 157 | 0, 158 | 0, 159 | 750, 160 | 1206, 161 | ); 162 | } 163 | drawImgMinisize(i, t, e, a, s, n, g, r, m, h) { 164 | this.ctx.drawImage( 165 | i, 166 | 0, 167 | 0, 168 | t, 169 | e, 170 | ((n / h - n) * (r / (a - n)) * h * 750) / n, 171 | ((g / h - g) * (m / (s - g)) * h * 1206) / g, 172 | 750 * h, 173 | 1206 * h, 174 | ); 175 | } 176 | drawSprite(i, t, e, a, s, n, g) { 177 | var r = s[a]; 178 | this.ctx.drawImage(i, r[0], r[1], r[2], r[3], t, e, n, g); 179 | } 180 | } 181 | 182 | return PipCanvas; 183 | 184 | }))); 185 | --------------------------------------------------------------------------------