cbvirtua 1.0.51 → 1.0.53
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
Binary file
|
package/package.json
CHANGED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
// 方法一：放大画布之后，直接用 scale 放大整个坐标系
|
|
2
|
+
// * 但是你要知道我们一直是在放大的坐标系上绘制的，可能不知道什么时候（比如重新设置画布宽高），scale 可能就会被重置成 1 了，从而造成画面错乱
|
|
3
|
+
adaptDPR() { // 在初始化 canvas 的时候就要调用该方法
|
|
4
|
+
const dpr = window.devicePixelRatio;
|
|
5
|
+
const { width, height } = this.canvas;
|
|
6
|
+
// 重新设置 canvas 自身宽高大小和 css 大小。放大 canvas；css 保持不变，因为我们需要那么多的点
|
|
7
|
+
this.canvas.width = Math.round(width * dpr);
|
|
8
|
+
this.canvas.height = Math.round(height * dpr);
|
|
9
|
+
this.canvas.style.width = width + 'px';
|
|
10
|
+
this.canvas.style.height = height + 'px';
|
|
11
|
+
// 直接用 scale 放大整个坐标系，相对来说就是放大了每个绘制操作
|
|
12
|
+
this.ctx2d.scale(dpr, dpr);
|
|
13
|
+
// 接下来的绘制操作和往常一样，比如画个矩形 ctx2d.strokeRect(x, y, w, h);原来该怎么算就怎么算，该怎么调用还是怎么调用
|
|
14
|
+
}
|
|
15
|
+
// 方法二：放大画布之后，需要把每一个绘制的 api 都乘以 dpr
|
|
16
|
+
// * 这样一来使用的时候就会很麻烦，所以我们需要把所有的绘制操作进行统一封装
|
|
17
|
+
// 可以参考这个库：https://github.com/jondavidjohn/hidpi-canvas-polyfill，不过这个库也不是所有 api 都覆盖
|
|
18
|
+
adaptDPR() { // 在初始化 canvas 的时候就要调用该方法
|
|
19
|
+
const dpr = window.devicePixelRatio;
|
|
20
|
+
const { width, height } = this.canvas;
|
|
21
|
+
// 重新设置 canvas 自身宽高大小和 css 大小。放大 canvas；css 保持不变，因为我们需要那么多的点
|
|
22
|
+
this.canvas.width = Math.round(width * dpr);
|
|
23
|
+
this.canvas.height = Math.round(height * dpr);
|
|
24
|
+
this.canvas.style.width = width + 'px';
|
|
25
|
+
this.canvas.style.height = height + 'px';
|
|
26
|
+
// 注意这里没有用 scale
|
|
27
|
+
}
|
|
28
|
+
// 接下来在每个涉及绘制的 api 时都乘以 dpr，比如绘制矩形的时候
|
|
29
|
+
strokeRect(x: number, y: number, w: number, h: number) {
|
|
30
|
+
const { ctx2d, dpr } = this;
|
|
31
|
+
if (!ctx2d) return;
|
|
32
|
+
x = x * dpr;
|
|
33
|
+
y = y * dpr;
|
|
34
|
+
w = w * dpr;
|
|
35
|
+
h = h * dpr;
|
|
36
|
+
ctx2d.strokeRect(x, y, w, h);
|
|
37
|
+
}
|
|
38
|
+
function createHDCanvas (canvas, w, h) {
|
|
39
|
+
const ratio = window.devicePixelRatio || 1;
|
|
40
|
+
canvas.width = w * ratio; // 实际渲染像素
|
|
41
|
+
canvas.height = h * ratio; // 实际渲染像素
|
|
42
|
+
canvas.style.width = `${w}px`; // 控制显示大小
|
|
43
|
+
canvas.style.height = `${h}px`; // 控制显示大小
|
|
44
|
+
const ctx = canvas.getContext('2d')
|
|
45
|
+
ctx.scale(ratio, ratio)
|
|
46
|
+
// canvas 绘制
|
|
47
|
+
return canvas;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
作者：李彦辉Jacky
|
|
51
|
+
链接：https://juejin.cn/post/7014765000916992036
|
|
52
|
+
来源：稀土掘金
|
|
53
|
+
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
|
|
54
|
+
|
|
55
|
+
const TTL = 5 * 1000 * 1000
|
|
56
|
+
const startTime = new Date().getTime()
|
|
57
|
+
async function polling() {
|
|
58
|
+
|
|
59
|
+
// 超过存活时间结束
|
|
60
|
+
const endTime = new Date().getTime()
|
|
61
|
+
if (endTime - startTime > TTL) {
|
|
62
|
+
return
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
// 这里的remoteCall是一个虚拟的函数，指代需要轮询的http接口
|
|
66
|
+
const response = await remoteCall()
|
|
67
|
+
|
|
68
|
+
// 这里的状态可以基于http，也可以自己定义自己的结构来处理。这里用200和非200做一个事例
|
|
69
|
+
if (response.status === 200) {
|
|
70
|
+
return response
|
|
71
|
+
} else {
|
|
72
|
+
// 这里可以看情况设定一个间隔时间。
|
|
73
|
+
// 复杂一点的可以设定一些间隔时间策略： 比如根据请求次数增加，增加间隔时间等等
|
|
74
|
+
// 这里只是一个例子，等待5秒
|
|
75
|
+
await new Promise(resolve => setTimeout(resolve, 5000));
|
|
76
|
+
return await polling()
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
作者：小南聊一聊
|
|
81
|
+
链接：https://juejin.cn/post/7099252918682910733
|
|
82
|
+
来源：稀土掘金
|
|
83
|
+
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
|