js画布封装之平铺(排版)

标签：cic 平铺 ci renderCI UTILS random js 画布 scrollCI

 

实现代码:

 1 import { UTILS } from "./Utils.js";
 2 import { CanvasImageDraw, CanvasEvent, CanvasImageScroll, CanvasImageCustom } from "./ElementUtils.js";
 3 
 4 /* 测试封装 canvas
 5     下载地址(无提取码, 2023.2.4 更新): https://www.123pan.com/s/ylTuVv-SfhpH
 6 */
 7 function main(){
 8 
 9     //CanvasImage 的渲染器
10     const renderCI = new CanvasImageDraw({width: innerWidth, height: innerHeight}),
11 
12     //CanvasImageDraw 的滚动条
13     scrollCI = new CanvasImageScroll(renderCI, {scrollSize: 8}),
14     
15     //CanvasImage 的事件运行类
16     eventCI = new CanvasEvent(renderCI),
17 
18     shadow = {blur: 5, color: "#666666", offsetX: 2, offsetY: 5},
19 
20     onup = v => {
21         if(v.delta < 600){
22             v.target.clear().fill("#333333").fillText(String(renderCI.list.indexOf(v.target)), "#cccccc");
23             renderCI.redraw();
24             cic.removeEventListener("up", onup);
25         }
26     }
27 
28     //批量创建 CanvasImage
29     for(let i = 0; i < 10000; i++){
30         const cic = new CanvasImageCustom()
31         .size(UTILS.random(10, 100), UTILS.random(10, 100))
32         .fillRect(`rgb(${UTILS.random(0,255)}, ${UTILS.random(0,255)}, ${UTILS.random(0,255)})`)
33         .fillText(String(i), "#000000");
34         cic.opacity = UTILS.random(0, 1);
35         cic.shadow = shadow;
36 
37         //scrollCI.bindScroll(ci: CanvasImage) 方法可以使滚动条(scrollCI)能够监听ci的位置和ci.visible属性的变化来更新滚动条
38         //scrollCI.changeCIAdd(ci: CanvasImage) 方法根据ci主动更新一次滚动条
39         scrollCI.bindScroll(cic);
40         scrollCI.changeCIAdd(cic);
41 
42         //加入到渲染器(renderCI)队列
43         renderCI.list[i] = cic;
44 
45         //添加鼠标事件
46         cic.addEventListener("up", onup);
47     }
48 
49     //平铺排序(向下看齐)和添加至dom树
50     renderCI.sortCIPos(null, {disX: 10, disY: 10, lineHeight: "bottom"})
51     .render(document.body);
52 
53     //退出:
54     //scrollCI.unbindEvent();
55     //canvasEvent.unbindEvent();
56     //renderCI.exit();
57     console.log(renderCI, scrollCI);
58 
59 }
60 
61 main();

 

结果视图:

 

 

下载地址(无提取码, 2023.2.4 更新): https://www.123pan.com/s/ylTuVv-SfhpH

运行 GoServer.exe 然后打开浏览器输入 http://localhost:8080/ 

标签：cic,平铺,ci,renderCI,UTILS,random,js,画布,scrollCI
From： https://www.cnblogs.com/weihexinCode/p/17092363.html