LaniakeaSupercluster/webrtc
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

可调边距

Browse Source
This commit is contained in:
觉
2023-11-01 17:47:42 +08:00
parent 5915c717a0
commit 8e18d19b7d
2 changed files with 105 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
src/ChineseChess.js
View File

@@ -22,6 +22,28 @@ class Chessman {
}
}
// 单独绘制棋盘
export function 棋盘(比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2) {
const 宽度 = (比例 * 8) + (边距 * 2)
const 高度 = (比例 * 9) + (边距 * 2)
const 画布 = createElement({ width: 宽度, height: 高度 }, 'canvas')
const ctx = 画布.getContext('2d')
ctx.strokeStyle = 线条色
ctx.lineWidth = 线条宽度
// 横线竖线
for (let i = 0; i < 10; i++) {
ctx.moveTo(边距, 比例 * i + 边距)
ctx.lineTo(比例 * 8 + 边距, 比例 * i + 边距)
ctx.moveTo(比例 * i + 边距, 边距)
ctx.lineTo(比例 * i + 边距, 比例 * 9 + 边距)
}
画布.style.backgroundColor = 背景色
document.body.appendChild(画布)
}
// 棋盘
export class Chessboard {
constructor() {
@@ -32,79 +54,77 @@ export class Chessboard {
this.operation = '';
}
// 初始化绘制棋盘
draw() {
const canvas = createElement({ width: 440, height: 500 }, 'canvas')
绘制棋盘({比例, 边距, 背景色='#ffeedd', 线条色='#784518', 线条宽度=2}) {
const 宽度 = (比例 * 8) + (边距 * 2)
const 高度 = (比例 * 9) + (边距 * 2)
const canvas = createElement({ width: 宽度, height: 高度 }, 'canvas')
const context = canvas.getContext('2d')
// 设置线条颜色
context.strokeStyle = '#784518'
// 设置线条宽度
context.lineWidth = 2
const width = 800 / 4 / 4
context.strokeStyle = 线条色
context.lineWidth = 线条宽度
// 横线竖线
for (let i = 0; i < 5; i++) {
context.moveTo(0, width * i)
context.lineTo(width * 4, width * i)
context.moveTo(width * i, 0)
context.lineTo(width * i, width * 4)
context.moveTo(0, 比例 * i)
context.lineTo(比例 * 4, 比例 * i)
context.moveTo(比例 * i, 比例 * 0)
context.lineTo(比例 * i, 比例 * 4)
}
// 斜线
context.moveTo(width * 3, width * 0)
context.lineTo(width * 4, width * 1)
context.moveTo(width * 4, width * 1)
context.lineTo(width * 3, width * 2)
context.moveTo(比例 * 3, 比例 * 0)
context.lineTo(比例 * 4, 比例 * 1)
context.moveTo(比例 * 4, 比例 * 1)
context.lineTo(比例 * 3, 比例 * 2)
// 炮位置
context.moveTo(width * 1 - 4, width * 2 - 9)
context.lineTo(width * 1 - 4, width * 2 - 4)
context.lineTo(width * 1 - 9, width * 2 - 4)
context.moveTo(width * 1 + 4, width * 2 - 9)
context.lineTo(width * 1 + 4, width * 2 - 4)
context.lineTo(width * 1 + 9, width * 2 - 4)
context.moveTo(width * 1 - 4, width * 2 + 9)
context.lineTo(width * 1 - 4, width * 2 + 4)
context.lineTo(width * 1 - 9, width * 2 + 4)
context.moveTo(width * 1 + 4, width * 2 + 9)
context.lineTo(width * 1 + 4, width * 2 + 4)
context.lineTo(width * 1 + 9, width * 2 + 4)
context.moveTo(比例 * 1 - 4, 比例 * 2 - 9)
context.lineTo(比例 * 1 - 4, 比例 * 2 - 4)
context.lineTo(比例 * 1 - 9, 比例 * 2 - 4)
context.moveTo(比例 * 1 + 4, 比例 * 2 - 9)
context.lineTo(比例 * 1 + 4, 比例 * 2 - 4)
context.lineTo(比例 * 1 + 9, 比例 * 2 - 4)
context.moveTo(比例 * 1 - 4, 比例 * 2 + 9)
context.lineTo(比例 * 1 - 4, 比例 * 2 + 4)
context.lineTo(比例 * 1 - 9, 比例 * 2 + 4)
context.moveTo(比例 * 1 + 4, 比例 * 2 + 9)
context.lineTo(比例 * 1 + 4, 比例 * 2 + 4)
context.lineTo(比例 * 1 + 9, 比例 * 2 + 4)
// 兵位置
context.moveTo(width * 0 - 4, width * 3 - 9)
context.lineTo(width * 0 - 4, width * 3 - 4)
context.lineTo(width * 0 - 9, width * 3 - 4)
context.moveTo(width * 0 + 4, width * 3 - 9)
context.lineTo(width * 0 + 4, width * 3 - 4)
context.lineTo(width * 0 + 9, width * 3 - 4)
context.moveTo(width * 2 - 4, width * 3 - 9)
context.lineTo(width * 2 - 4, width * 3 - 4)
context.lineTo(width * 2 - 9, width * 3 - 4)
context.moveTo(width * 2 + 4, width * 3 - 9)
context.lineTo(width * 2 + 4, width * 3 - 4)
context.lineTo(width * 2 + 9, width * 3 - 4)
context.moveTo(width * 4 - 4, width * 3 - 9)
context.lineTo(width * 4 - 4, width * 3 - 4)
context.lineTo(width * 4 - 9, width * 3 - 4)
context.moveTo(比例 * 0 - 4, 比例 * 3 - 9)
context.lineTo(比例 * 0 - 4, 比例 * 3 - 4)
context.lineTo(比例 * 0 - 9, 比例 * 3 - 4)
context.moveTo(比例 * 0 + 4, 比例 * 3 - 9)
context.lineTo(比例 * 0 + 4, 比例 * 3 - 4)
context.lineTo(比例 * 0 + 9, 比例 * 3 - 4)
context.moveTo(比例 * 2 - 4, 比例 * 3 - 9)
context.lineTo(比例 * 2 - 4, 比例 * 3 - 4)
context.lineTo(比例 * 2 - 9, 比例 * 3 - 4)
context.moveTo(比例 * 2 + 4, 比例 * 3 - 9)
context.lineTo(比例 * 2 + 4, 比例 * 3 - 4)
context.lineTo(比例 * 2 + 9, 比例 * 3 - 4)
context.moveTo(比例 * 4 - 4, 比例 * 3 - 9)
context.lineTo(比例 * 4 - 4, 比例 * 3 - 4)
context.lineTo(比例 * 4 - 9, 比例 * 3 - 4)
// 兵位置向上镜像
context.moveTo(width * 0 - 4, width * 3 + 9)
context.lineTo(width * 0 - 4, width * 3 + 4)
context.lineTo(width * 0 - 9, width * 3 + 4)
context.moveTo(width * 0 + 4, width * 3 + 9)
context.lineTo(width * 0 + 4, width * 3 + 4)
context.lineTo(width * 0 + 9, width * 3 + 4)
context.moveTo(width * 2 - 4, width * 3 + 9)
context.lineTo(width * 2 - 4, width * 3 + 4)
context.lineTo(width * 2 - 9, width * 3 + 4)
context.moveTo(width * 2 + 4, width * 3 + 9)
context.lineTo(width * 2 + 4, width * 3 + 4)
context.lineTo(width * 2 + 9, width * 3 + 4)
context.moveTo(width * 4 - 4, width * 3 + 9)
context.lineTo(width * 4 - 4, width * 3 + 4)
context.lineTo(width * 4 - 9, width * 3 + 4)
context.moveTo(比例 * 0 - 4, 比例 * 3 + 9)
context.lineTo(比例 * 0 - 4, 比例 * 3 + 4)
context.lineTo(比例 * 0 - 9, 比例 * 3 + 4)
context.moveTo(比例 * 0 + 4, 比例 * 3 + 9)
context.lineTo(比例 * 0 + 4, 比例 * 3 + 4)
context.lineTo(比例 * 0 + 9, 比例 * 3 + 4)
context.moveTo(比例 * 2 - 4, 比例 * 3 + 9)
context.lineTo(比例 * 2 - 4, 比例 * 3 + 4)
context.lineTo(比例 * 2 - 9, 比例 * 3 + 4)
context.moveTo(比例 * 2 + 4, 比例 * 3 + 9)
context.lineTo(比例 * 2 + 4, 比例 * 3 + 4)
context.lineTo(比例 * 2 + 9, 比例 * 3 + 4)
context.moveTo(比例 * 4 - 4, 比例 * 3 + 9)
context.lineTo(比例 * 4 - 4, 比例 * 3 + 4)
context.lineTo(比例 * 4 - 9, 比例 * 3 + 4)
// 描绘线条
context.stroke()
@@ -118,51 +138,46 @@ export class Chessboard {
context.save() // 保存当前状态
context.translate(0, 0) // 移动到要镜像的区域
context.scale(1, -1) // Y轴镜像
context.drawImage(canvas, 0, 0, 800, 400, 0, -400 - width, 800, 400) // 将上半部分镜像到下半部分
context.drawImage(canvas, 0, 0, 800, 400, 0, -400 - 比例, 800, 400) // 将上半部分镜像到下半部分
context.restore() // 恢复到上次保存的状态
// 河界
context.font = '20px serif'
context.fillStyle = '#784518'
context.fillText('楚', width * 1.5, width * 4.65)
context.fillText('河', width * 2.5, width * 4.65)
context.fillText('漢', width * 5.5, width * 4.65)
context.fillText('界', width * 6.5, width * 4.65)
context.fillText('楚', 比例 * 1.5, 比例 * 4.65)
context.fillText('河', 比例 * 2.5, 比例 * 4.65)
context.fillText('漢', 比例 * 5.5, 比例 * 4.65)
context.fillText('界', 比例 * 6.5, 比例 * 4.65)
var img = new Image()
img.onload = function () {
// 清除原始的canvas
context.clearRect(0, 0, canvas.width, canvas.height)
// 将Image对象的内容绘制回原始的canvas，但是向右和向下偏移20px
context.drawImage(img, 20, 20)
// 重新描绘线条
context.beginPath()
context.drawImage(img, 边距, 边距)
context.beginPath() // 重新描绘线条
// 棋盘描边
context.moveTo(20, 20)
context.lineTo(20, width * 9.4)
context.lineTo(width * 8.4, width * 9.4)
context.lineTo(width * 8.4, 20)
context.lineTo(20, 20)
context.moveTo(边距, 边距)
context.lineTo(边距, 边距 + (比例 * 9))
context.lineTo(边距 + (比例 * 8), 边距 + (比例 * 9))
context.lineTo(边距 + (比例 * 8), 边距)
context.lineTo(边距, 边距)
context.stroke()
};
}
img.src = canvas.toDataURL()
canvas.style.backgroundColor = '#ffeedd'
document.body.appendChild(canvas)
// 单独保存绘制好的棋盘
const chessboard = canvas.toDataURL()
this.drawChessman(context, '車', 'red', { top: 0, left: 0 })
}
// 初始化绘制棋子
drawChessman() {
const chessman = createElement({
style: {
backgroundColor: '#f00',
width: '50px',
height: '50px',
},
innerText: '棋子',
});
document.body.appendChild(chessman);
// canvas绘制棋子
drawChessman(context, name, color, position = { top: 0, left: 0 }) {
context.font = '20px serif'
context.fillStyle = color
context.fillText(name, position.left, position.top)
context.stroke()
}
}

4
src/main.js
View File

@@ -11,11 +11,11 @@ window.Buffer = Buffer
window.process = process
import { parseBlob } from 'music-metadata-browser'
import { Chessboard } from './ChineseChess.js'
import { Chessboard, 棋盘 } from './ChineseChess.js'
// 中国象棋
const chessboard = new Chessboard()
chessboard.draw()
chessboard.绘制棋盘({比例: 50, 边距: 20})
// 缓冲分片发送
const CHUNK_SIZE = 1024 * 64 // 默认每个块的大小为128KB