onion27/rd.rdlevel.cn
1
0
Fork 0
forked from RDCNWebs/rd.rdlevel.cn
Code Pull Requests Activity

[rdview2] 性能测试

Browse Source
This commit is contained in:
OLDREDSTONE 2026-01-14 00:43:51 +08:00
parent 05c3417439
commit 479da74bfa
5 changed files with 1114 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -19,8 +19,8 @@
<link rel="stylesheet" href="/style/special.css">
</head>
<body>
<div id="app">加载中...</div>
<body style="background-color: #1f1f1f;">
<div id="app" style="color: white;">加载中...</div>
<script>
$docsify = {
name: "节奏医生编辑器教程",

1027
script/View.js Normal file
View File

File diff suppressed because it is too large Load Diff

BIN
script/assets.bin Normal file
View File

Binary file not shown.

BIN
script/assets.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

85
script/special.js
View File

@ -236,6 +236,91 @@ function rdview() {
textarea.addEventListener("input", initCanvas);
}
function rdview2() {
let rdview = document.getElementsByClassName("rdview2")[0];
if (!rdview) return;
let rdcanvas = rdview.querySelector(".canvas");
let textarea = rdview.querySelector("textarea.area");
let number = rdview.querySelector(".number");
const textareaStyles = window.getComputedStyle(textarea);
[
"fontFamily",
"fontSize",
"fontWeight",
"letterSpacing",
"lineHeight",
"padding",
].forEach((property) => {
number.style[property] = textareaStyles[property];
});
const canvas = document.createElement("canvas");
const context = canvas.getContext("2d");
const font = `${textareaStyles.fontSize} ${textareaStyles.fontFamily}`;
context.font = font;
function calcStringLines(sentence, width) {
if (!width) return 0;
const words = sentence.split("");
let lineCount = 0;
let currentLine = "";
for (let i = 0; i < words.length; i++) {
const wordWidth = context.measureText(words[i]).width;
const lineWidth = context.measureText(currentLine).width;
if (lineWidth + wordWidth > width) {
lineCount++;
currentLine = words[i];
} else {
currentLine += words[i];
}
}
if (currentLine.trim() !== "") lineCount++;
return lineCount;
}
function calcLines() {
const lines = textarea.value.split("\n");
const textareaWidth = textarea.getBoundingClientRect().width;
const textareaScrollWidth = textareaWidth - textarea.clientWidth;
const parseNumber = (v) =>
v.endsWith("px") ? parseInt(v.slice(0, -2), 10) : 0;
const textareaPaddingLeft = parseNumber(textareaStyles.paddingLeft);
const textareaPaddingRight = parseNumber(textareaStyles.paddingRight);
const textareaContentWidth = textareaWidth - textareaPaddingLeft -
textareaPaddingRight - textareaScrollWidth;
const numLines = lines.map((lineString) =>
calcStringLines(lineString, textareaContentWidth)
);
let lineNumbers = [];
let i = 1;
while (numLines.length > 0) {
const numLinesOfSentence = numLines.shift();
lineNumbers.push(i);
if (numLinesOfSentence > 1) {
Array(numLinesOfSentence - 1)
.fill("")
.forEach((_) => lineNumbers.push(""));
}
i++;
}
return lineNumbers;
}
function initLineNumbers() {
const lines = calcLines();
const lineDoms = Array.from({
length: lines.length,
}, (_, i) => `<div>${lines[i] || "&nbsp;"}</div>`);
number.innerHTML = lineDoms.join("");
}
function initCanvas() {
const lang = textarea.value.split("\n")[0];
const code = textarea.value.split("\n").slice(1).join("\n");
rdcanvas.innerHTML = RDViewRender(lang, code);
}
initCanvas();
initLineNumbers();
textarea.addEventListener("input", initLineNumbers);
textarea.addEventListener("input", initCanvas);
}
function rdview2() {
let rdview = document.getElementsByClassName("rdview2")[0];
if (!rdview) return;