测试 CanvasImageScroll 的参数 option.isPage 画布的滚动条变异成拖拽翻页效果(注意桌面端无效):

index.html:

 1 <!DOCTYPE html>
 2 <html lang = "zh-cn">
 3     
 4     <head>
 5         <title>testCanvas</title>
 6         <meta charset = "utf-8" />
 7         <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
 8         <style>
 9             *{
10                 margin:0;
11                 padding: 0;
12             }
13             body{
14                 overflow: hidden;
15             }
16         </style>
17     </head>
18 
19     <body>
20 
21         <script src = "./js/main.js" type = "module"></script>
22 
23     </body>
24 
25 </html>

main.js:

 1 import { ElementUtils, CanvasImageDraw, CanvasImageScroll, CanvasImage } from "./ElementUtils.js";
 2 
 3 /* 测试 CanvasImageScroll 的参数 option.isPage 画布的滚动条变异成拖拽翻页效果(注意桌面端无效):
 4     下载地址(无提取码, 2023.2.17 更新): https://www.123pan.com/s/ylTuVv-oIhpH
 5 */
 6 function main(){
 7 
 8     const urls = ["./img/31.jpg", "./img/49.jpg", "./img/52.jpg"],
 9 
10     cid = new CanvasImageDraw({width: 300, height: 300, alpha: true}), 
11 
12     cis = new CanvasImageScroll(cid, {scrollVisible: "auto", scrollSize: 4, isPage: true});
13 
14     ElementUtils.createCanvasFromURL(cid.box.w, cid.box.h, urls, true, imgs => {
15 
16         //创建 CanvasImage 并将其位置设置为从左往右平铺
17         for(let i = 0; i < imgs.length; i++) cid.list[i] = new CanvasImage(imgs[i]).pos(i * imgs[i].width, 0);
18 
19         //cis 能够监听 CanvasImage
20         cis.bindScrolls();
21 
22         //绘制一次画布并把画布加入到DOM树
23         cid.domElement.style = `
24             background: #000000;
25             position: absolute;
26             left: ${(innerWidth - cid.box.w) / 2}px;
27             top: ${(innerHeight - cid.box.h) / 2}px;
28         `;
29         cid.render();
30 
31     });
32 
33 }
34 
35 main();

 

posted @ 2023-02-17 17:14  鸡儿er  阅读(13)  评论(0)  编辑  收藏  举报