You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.8 KiB
56 lines
1.8 KiB
function drawTextVertical(context, text, x, y,totalHeight) {
|
|
var arrText = text.split('');
|
|
var arrWidth = arrText.map(function (letter) {
|
|
//totalHeight总高度，用于计算每个字之间的间距
|
|
if(arrText.length > 3){ //这里这么写只是解决bug快，不想改生成海报那边了
|
|
return totalHeight / (arrText.length - 1);
|
|
}else{
|
|
return totalHeight / arrText.length;
|
|
}
|
|
});
|
|
|
|
var align = context.textAlign;
|
|
var baseline = context.textBaseline;
|
|
|
|
if (align == 'left') {
|
|
x = x + Math.max.apply(null, arrWidth) / 2;
|
|
} else if (align == 'right') {
|
|
x = x - Math.max.apply(null, arrWidth) / 2;
|
|
}
|
|
if (baseline == 'bottom' || baseline == 'alphabetic' || baseline == 'ideographic') {
|
|
y = y - arrWidth[0] / 2;
|
|
} else if (baseline == 'top' || baseline == 'hanging') {
|
|
y = y + arrWidth[0] / 2;
|
|
}
|
|
|
|
context.textAlign = 'center';
|
|
context.textBaseline = 'middle';
|
|
|
|
// 开始逐字绘制
|
|
arrText.forEach(function (letter, index) {
|
|
// 确定下一个字符的纵坐标位置
|
|
var letterWidth = arrWidth[index];
|
|
// 是否需要旋转判断
|
|
var code = letter.charCodeAt(0);
|
|
if (code <= 256) {
|
|
context.translate(x, y);
|
|
// 英文字符，旋转90°
|
|
context.rotate(90 * Math.PI / 180);
|
|
context.translate(-x, -y);
|
|
} else if (index > 0 && text.charCodeAt(index - 1) < 256) {
|
|
// y修正
|
|
y = y + arrWidth[index - 1] / 2;
|
|
}
|
|
context.fillText(letter, x, y);
|
|
// 旋转坐标系还原成初始态
|
|
context.setTransform(1, 0, 0, 1, 0, 0);
|
|
// 确定下一个字符的纵坐标位置
|
|
var letterWidth = arrWidth[index];
|
|
y = y + letterWidth;
|
|
});
|
|
// 水平垂直对齐方式还原
|
|
context.textAlign = align;
|
|
context.textBaseline = baseline;
|
|
}
|
|
|
|
export default drawTextVertical
|