Skip to content

Improve code block line number calculation #12382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
TCOTC opened this issue Sep 3, 2024 · 0 comments
Closed

Improve code block line number calculation #12382

TCOTC opened this issue Sep 3, 2024 · 0 comments
Assignees
@Vanessa219
Labels
Enhancement
Milestone
3.1.6

Comments

@TCOTC
Copy link
Contributor

TCOTC commented Sep 3, 2024 •
edited by 88250
Loading

代码块开启行号和换行。代码换行了，行号没有跟着动

https://ld246.com/article/1725336779646

代码换行了，行号没有跟着动：

image

测试用的代码：

//编辑器区域水印 JS片段 https://ld246.com/article/1722247445881
let watermarkContent = "JeffreyChen"; // 设置水印内容
let watermarkWidth = 120; // 定义水印画布的宽度
let watermarkHeight = 70; // 定义水印画布的高度

// 创建一个新的canvas元素，用于绘制水印
let canvas = document.createElement("canvas");
let ctx = canvas.getContext('2d'); // 获取canvas的2D渲染上下文

// 计算旋转角度
const angle = (-25 * Math.PI) / 180; // 旋转角度转换为弧度

// 保存初始状态
ctx.save();

// 计算文本的宽度和高度
ctx.font = "18px Arial"; // 设置字体样式，确保与填充文本一致
const textWidth = ctx.measureText(watermarkContent).width; // 计算文本宽度
const textHeight = 18; // 字体大小就是文本的高度

// 设置canvas的大小，考虑到旋转后的文本位置
canvas.width = Math.max(watermarkWidth, textHeight * Math.abs(Math.sin(angle)) + textWidth * Math.abs(Math.cos(angle)));
canvas.height = Math.max(watermarkHeight, textHeight * Math.abs(Math.cos(angle)) + textWidth * Math.abs(Math.sin(angle)));

// 清空canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 移动Canvas的原点到中心
ctx.translate(canvas.width / 2, canvas.height / 2);

// 旋转canvas中的文本
ctx.rotate(angle); // 执行旋转操作

// 设置填充颜色
ctx.fillStyle = "rgba(211, 211, 211, .3)"; // 设置填充颜色为浅灰色，并设置其透明度

// 在canvas的指定位置绘制水印文本
ctx.fillText(watermarkContent, -textWidth / 2, textHeight / 2); // 使文本中心对齐

// 恢复canvas原始状态
ctx.restore();

// 将canvas内容转为data URL格式的图片
let watermarkDataURL = canvas.toDataURL('image/png');

// 创建一个style标签用于定义水印样式
const defaultStyle = document.createElement('style');
defaultStyle.innerHTML = `
.protyle::before {
    content: ''; /* 创建一个空的伪元素 */
    display: block; /* 将伪元素设为块级元素 */
    position: absolute; /* 绝对定位，使其覆盖在目标元素上 */
    top: 0; /* 伪元素的上边距设置为0 */
    left: 0; /* 伪元素的左边距设置为0 */
    height: 100%; /* 伪元素的高度设置为100%，覆盖整个目标元素 */
    width: 100%; /* 伪元素的宽度设置为100%，覆盖整个目标元素 */
    background-image: url(${watermarkDataURL}); /* 设置背景图片为之前生成的水印图像 */
    background-repeat: repeat; /* 背景图像重复，形成密集的水印效果 */
    pointer-events: none; /* 禁用伪元素的鼠标事件，确保底层元素可以接收事件 */
    z-index: 2; /* 设置z-index，使其在堆叠上下文中显示在其他元素之上 */
}`;

// 将样式标签添加到文档的<head>部分
document.head.appendChild(defaultStyle);
@TCOTC TCOTC changed the title 代码块开启行号和换行后的异常 代码块开启行号和换行。代码换行了，行号没有跟着动 Sep 3, 2024
@88250 88250 added the Bug label Sep 3, 2024
@88250 88250 added this to the 3.1.6 milestone Sep 3, 2024
@88250 88250 added Enhancement and removed Bug labels Sep 3, 2024
@88250 88250 changed the title 代码块开启行号和换行。代码换行了，行号没有跟着动 Improve code block line number calculation Sep 3, 2024
Vanessa219 added a commit that referenced this issue Sep 3, 2024
@Vanessa219
🎨 #12382
6278d97
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Vanessa219 Vanessa219

Labels
Enhancement
Projects
None yet
Milestone
3.1.6
Development

No branches or pull requests
3 participants
@88250 @Vanessa219 @TCOTC