Elgato_dark/idraw
1
0
Fork 0
mirror of https://github.com/idrawjs/idraw synced 2026-05-24 01:58:27 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix: fix text wrap and overflow problem

Browse source
This commit is contained in:
chenshenhai 2022-02-14 23:20:06 +08:00
parent 8278c1fd58
commit a3cd867822
3 changed files with 51 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/renderer/dev/data.js
View file

@ -10,8 +10,8 @@ const data = {
type: "rect",
desc: {
bgColor: "#ffeb3b",
borderRadius: 10,
borderWidth: 5,
borderRadius: 2,
borderWidth: 0,
borderColor: "#ffc107",
},
},
@ -25,11 +25,12 @@ const data = {
type: "text",
desc: {
fontSize: 16,
text: "Hello Text",
text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join('\r\n'),
// text: [0, 1, 2, 3, 4].map(i => `Hello Text ${i}`).join(''),
fontWeight: 'bold',
color: "#666666",
borderRadius: 30,
borderWidth: 4,
borderWidth: 2,
borderColor: "#ff5722",
},
},

29
packages/renderer/dev/main.js
View file

@ -9,9 +9,9 @@ const canvas = document.querySelector('#canvas');
const opts = {
width: 600,
height: 400,
contextWidth: 600,
contextHeight: 400,
devicePixelRatio: 1,
contextWidth: 1200,
contextHeight: 800,
devicePixelRatio: 2,
}
const renderer = new Renderer(opts);
@ -19,27 +19,28 @@ const renderer = new Renderer(opts);
renderer.on('load', (e) => {
console.log('load =', e)
})
renderer.on('loadComplete', (e) => {
console.log('loadComplete =', e)
})
// renderer.on('loadComplete', (e) => {
// console.log('loadComplete =', e)
// })
renderer.on('drawFrame', (e) => {
console.log('drawFrame =', e)
})
renderer.on('drawFrameComplete', (e) => {
console.log('drawFrameComplete =', e)
})
// renderer.on('drawFrame', (e) => {
// console.log('drawFrame =', e)
// })
// renderer.on('drawFrameComplete', (e) => {
// console.log('drawFrameComplete =', e)
// })
// renderer.render(canvas, data)
// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
// console.log(renderer.getContext())
canvas.style.width = opts.width;
canvas.style.height = opts.height;
// canvas.width = opts.width * opts.devicePixelRatio;
// canvas.height = opts.height * opts.devicePixelRatio;
// const ctx = new Context(canvas.getContext('2d'), opts)
renderer.render(canvas, data);
renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })
// renderer.render(canvas, { elements: data.elements.splice(1, 2) }, { forceUpdate: false })

50
packages/renderer/src/lib/draw/text.ts
View file

@ -38,34 +38,46 @@ export function drawText(
const fontHeight = desc.lineHeight || desc.fontSize;
const descTextList = descText.split('\n');
const lines: {text: string, width: number}[] = [];
descTextList.forEach((tempText) => {
let lineNum = 0;
descTextList.forEach((tempText: string, idx: number) => {
let lineText = '';
let lineNum = 0;
for (let i = 0; i < tempText.length; i++) {
if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
lineText += (tempText[i] || '');
} else {
lines.push({
text: lineText,
width: ctx.calcScreenNum(ctx.measureText(lineText).width),
});
lineText = (tempText[i] || '');
lineNum ++;
}
if ((lineNum + 1) * fontHeight > elem.h) {
break;
}
if (lineText && tempText.length - 1 === i) {
if ((lineNum + 1) * fontHeight < elem.h) {
if (tempText.length > 0) {
for (let i = 0; i < tempText.length; i++) {
if (ctx.measureText(lineText + (tempText[i] || '')).width < ctx.calcDeviceNum(elem.w)) {
lineText += (tempText[i] || '');
} else {
lines.push({
text: lineText,
width: ctx.calcScreenNum(ctx.measureText(lineText).width),
});
lineText = (tempText[i] || '');
lineNum ++;
}
if ((lineNum + 1) * fontHeight > elem.h) {
break;
}
if (tempText.length - 1 === i) {
if ((lineNum + 1) * fontHeight < elem.h) {
lines.push({
text: lineText,
width: ctx.calcScreenNum(ctx.measureText(lineText).width),
});
if(idx < descTextList.length - 1){
lineNum ++
}
break;
}
}
}
} else {
lines.push({
text: '',
width: 0,
});
}
});
// draw text lines