输入框样式需做成竖排样式;
使用 Canvas 生成图片供用户保存,图片中的文字方向为竖排;
非汉字需与汉字垂直。
项目地址
DOM 实现文字竖排
标签没有竖排的属性,最先尝试修改 的样式来实现效果,但是效果不理想。最后使用 HTML 的 contenteditable 属性。
尝试修改 input 样式(失败)
想通过限定 输入框的宽度 与 文字的大小 ,让文字自动换行。
关键代码
input{
width: 30px;
height: 250px;
font-size: 30px;
}
复制代码
放弃原因
英文字符宽度小,会出现换行失败的情况
使用 HTML 的 contenteditable 属性代替 (推荐)
HTML 的 contenteditable 属性规定元素内容是否可编辑。
关键代码
复制代码
contenteditable
writing-mode
使用原因
非中文自动旋转,排版更好看(实现了需求中的第三点)
Canvas 实现文字竖排
Canvas 同样没有竖排文字的属性,我通过遍历文字的方式进行绘制。
关键代码
let name; // 文本内容
let x = 657,y=170; // 文字开始的坐标
let letterSpacing = 10; // 设置字间距
for(let i = 0; i < this.name.length; i++){
const str = this.name.slice(i,i+1).toString();
if(str.match(/[A-Za-z0-9]/)&&(y<576)){ // 非汉字 旋转
ctx.save();
ctx.translate(x,y);
ctx.rotate(Math.PI/180*90);
ctx.textBaseline = 'bottom';
ctx.fillText(str,0,0);
ctx.restore();
y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
}else if(str.match(/[\u4E00-\u9FA5]/)&&(y<576)){
ctx.save();
ctx.textBaseline = 'top';
ctx.fillText(str,x,y);
ctx.restore();
y+=ctx.measureText(str).width+letterSpacing; // 计算文字宽度
}
}
复制代码