新建： 编辑：   |   分类：   | 字数： 1457 字

Fabric.js v4.4.0 实现画笔、文本、直线及椭圆等绘制的示例代码。

index.html

HTML
 1<!DOCTYPE html>
 2<html>
 3  <head>
 4    <meta charset="UTF-8">
 5    <title>FabricJS</title>
 6    <style>
 7      .fabric-toolbar {
 8        width: 720px;
 9        position: absolute;
10        left: 0;
11        right: 0;
12        margin: auto;
13        z-index: 1;
14
15        display: grid;
16        grid-template-rows: 1fr 1fr;
17        grid-template-columns: repeat(7, 1fr);
18        border: 1px solid black;
19        grid-gap: 10px;
20        background-color: black;
21      }
22
23      .fabric-toolbar > div {
24        background-color: white;
25        padding: 15px;
26        text-align: center;
27      }
28
29      .fabric-toolbar__tool {
30        cursor: pointer;
31      }
32
33    </style>
34  </head>
35  <body>
36    <div class="fabric-toolbar">
37      <div class="fabric-toolbar__tool js-mode" data-mode="draw">
38        画笔
39      </div>
40      <div class="fabric-toolbar__tool js-mode" data-mode="text">
41        文本
42      </div>
43      <div class="fabric-toolbar__tool js-mode" data-mode="line">
44        直线
45      </div>
46      <div class="fabric-toolbar__tool js-mode" data-mode="ellipse">
47        椭圆
48      </div>
49      <div class="fabric-toolbar__tool js-mode" data-mode="rect">
50        矩形
51      </div>
52      <div class="fabric-toolbar__tool js-mode" data-mode="eraser">
53        像皮擦
54      </div>
55      <div id="js-undo" class="fabric-toolbar__tool">上一步</div>
56
57      <div>
58        <input type="radio" name="width" data-value="6" checked>6px
59      </div>
60      <div><input type="radio" name="width" data-value="10">10px</div>
61      <div><input type="radio" name="width" data-value="14">14px</div>
62
63      <div style="background-color: #e74c3c;">
64        <input type="radio" name="color" data-value="#e74c3c" checked>
65      </div>
66      <div style="background-color: #2ecc71;">
67        <input type="radio" name="color" data-value="#2ecc71">
68      </div>
69      <div style="background-color: #3498db;">
70        <input type="radio" name="color" data-value="#3498db">
71      </div>
72      <div style="background-color: #e67e22;">
73        <input type="radio" name="color" data-value="#e67e22">
74      </div>
75    </div>
76
77    <canvas id="js-canvas"></canvas>
78
79    <script src="fabric.min.js"></script>
80    <script src="index.js" type="module"></script>
81  </body>
82</html>
阅读全文 »

新建： 编辑：   |   分类：   | 字数： 338 字

创建透明的全屏遮罩，可用于屏幕绘制（批注）、截图等。

JavaScript
 1const { app, BrowserWindow, screen } = require('electron');
 2
 3class Main {
 4  win;
 5
 6  constructor() {
 7    // Linux 中禁用 GPU 渲染，否则无法透明窗口
 8    if (process.platform === 'linux') {
 9      app.disableHardwareAcceleration();
10    }
11    
12    app.whenReady().then(() => {
13      this._createWindow();
14      this._forMacOs();
15    });
16  }
17
18  _createWindow() {
19    // `bounds`：使覆盖全屏幕，包含 MacOS Menu Bar
20    // `size`：仅应用区大小
21    const { width, height, x, y } = screen.getPrimaryDisplay().bounds;
22
23    this.win = new BrowserWindow({
24      width,
25      height,
26      x,
27      y,
28      hasShadow: false,
29      transparent: true,
30      frame: false,
31      movable: false,
32      resizable: false,
33
34      // 不会将窗口置于 MacOS Menu Bar 之上
35      // alwaysOnTop: true,
36
37      // Windows 下必须配置，而 MacOS 则不需要（否则会打开一个全屏新桌面）
38      fullscreen: process.platform !== 'darwin',
39      // 1）使覆盖全屏幕，包含 MacOS Menu Bar
40      enableLargerThanScreen: true,
41
42      // Windows 下必须配置，否则会禁用视频播放
43      type: 'toolbar',
44
45      webPreferences: {
46        nodeIntegration: true,
47        contextIsolation: false
48      }
49    });
50
51    // 2）使覆盖全屏幕，包含 MacOS Menu Bar
52    this.win.setAlwaysOnTop(true, 'screen-saver');
53
54    this.win.loadFile('renderer/index.html');
55  }
56
57  _forMacOs() {
58    app.on('activate', () => {
59      if (BrowserWindow.getAllWindows().length === 0) this._createWindow();
60    });
61
62    app.on('window-all-closed', () => {
63      if (process.platform !== 'darwin') app.quit();
64    });
65  }
66}
67
68new Main();
阅读全文 »

新建： 编辑：   |   分类：   | 字数： 223 字

HTTP 请求报文（Request Message）和 HTTP 响应报文（Response Message）格式。

请求报文

Http
1GET /posts/1 HTTP/1.1
2Host: jsonplaceholder.typicode.com
3User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.212 Safari/537.36
4Accept-Language: en,zh;q=0.9
5
6<BODY>
阅读全文 »

新建： 编辑：   |   分类：   | 字数： 521 字

同步代码

  • 代码按顺序一行一行执行
  • 当执行耗时操作时，后续代码只能等待当前代码执行完成后才能执行

比如 alert 函数就是同步代码。

JavaScript
1const p = document.querySelector('.paragraph');
2p.textContent = 'JS 修改后内容';
3alert('阻塞')
4p.style.color = 'red';
HTML
1<p class="paragraph">初始内容</p>
2
3<script src="index.js"></script>
阅读全文 »

新建： 编辑：   |   分类：   | 字数： 423 字

Python 中一个 .py 文件就是一个模块。Python 支持多种模块导入语法，此外通过 if __name__ == '__main__' 可避免在导入模块时，直接执行被导入模块中的所有代码。

Python 之所以能找到并导入模块（文件）的原因在于 sys.path。

Python
1import sys
2
3print(sys.path)

其中 sys.path 主要由以下几部分组成：

  1. 当前脚本所在目录
  2. 环境变量 PYTHONPATH
  3. Python 标准库所在目录
  4. 第三方包 site-packages
阅读全文 »
0%