Commit 005bfb14 by ramdayalmunda

lines width calculated successfully

parent b727862d
...@@ -23,7 +23,7 @@ var ADocEditor = function (customConfig) { ...@@ -23,7 +23,7 @@ var ADocEditor = function (customConfig) {
fontFamily: 'Arial', fontFamily: 'Arial',
bold: false, bold: false,
italic: false, italic: false,
fontColor: "#0004" fontColor: "#001"
}, },
} }
var config = JSON.parse(JSON.stringify(defaultConfig)); var config = JSON.parse(JSON.stringify(defaultConfig));
...@@ -36,7 +36,14 @@ var ADocEditor = function (customConfig) { ...@@ -36,7 +36,14 @@ var ADocEditor = function (customConfig) {
{ {
id: ++counter, id: ++counter,
type: 0, type: 0,
plainContent: "This approach divides the text into lines, trying to evenly distribute the words to justify the content within the specified canvas width. Keep in mind that this is a basic example and might not perfectly replicate the behavior of CSS text justification in HTML.", plainContent: "Rendering text in HTML canvas involves using the CanvasRenderingContext2D interface to display text content within a canvas element. This process allows for dynamic text display, enabling the creation of custom text effects, labels, captions, or textual elements within the canvas.",
style: { ...config.style }
},
{
id: ++counter,
type: 0,
plainContent: "To render text on a canvas, developers typically use the fillText() method provided by the Canvas API. This method allows the specification of text content, font styles, position, and color. Additionally, the measureText() method helps in determining the width of text, facilitating accurate positioning and layout arrangements.",
style: { ...config.style } style: { ...config.style }
} }
] ]
...@@ -139,7 +146,6 @@ var ADocEditor = function (customConfig) { ...@@ -139,7 +146,6 @@ var ADocEditor = function (customConfig) {
} }
function reRenderPages(dataList) { function reRenderPages(dataList) {
console.clear()
if (renderInProgress) return if (renderInProgress) return
renderInProgress = true renderInProgress = true
...@@ -161,15 +167,14 @@ var ADocEditor = function (customConfig) { ...@@ -161,15 +167,14 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < dataList.length; i++) { for (let i = 0; i < dataList.length; i++) {
let canvas = canvasList[canvasIndex].el let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1) canvas.setAttribute("tabIndex", -1)
calculateTextSizeAndPosition(canvas, i) calculateTextSizeAndPosition(canvasIndex, i)
} }
console.log(dataList[0].plainContent.length, dataList[0].plainContent) renderTheLines()
console.log('lines', lines)
function calculateTextSizeAndPosition(canvas, dataSetIndex) { function calculateTextSizeAndPosition(canvasIndex, dataSetIndex) {
let dataBlock = dataList[dataSetIndex] let dataBlock = dataList[dataSetIndex]
let canvas = canvasList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true }) let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save() ctx.save()
...@@ -181,7 +186,6 @@ var ADocEditor = function (customConfig) { ...@@ -181,7 +186,6 @@ var ADocEditor = function (customConfig) {
x: 0, // this is the starting point x; it will change based on the tabNumber x: 0, // this is the starting point x; it will change based on the tabNumber
y: 0, // this is the starting y coordinate; it will change based on the max font size y: 0, // this is the starting y coordinate; it will change based on the max font size
plainContent: "", plainContent: "",
formatedText: [], // { x: 10, y: 25 }, // bold,italic, fontSize, can be pulled from "dataSet"
fontSize: 0, fontSize: 0,
maxFontSize: 0, maxFontSize: 0,
...@@ -206,15 +210,16 @@ var ADocEditor = function (customConfig) { ...@@ -206,15 +210,16 @@ var ADocEditor = function (customConfig) {
if ( /\s/.test(dataBlock.plainContent[i]) ){ if ( /\s/.test(dataBlock.plainContent[i]) ){
wordEndIndex = i wordEndIndex = i
lineObj.charEndIndex = wordEndIndex; lineObj.charEndIndex = wordEndIndex;
// let charWidth = getCharacterWidth(ctx, dataBlock.plainContent[i], dataBlock.formatedText[i])
} }
tempLineWidth += getCharacterWidth( ctx, dataBlock.plainContent[i], style ) let charWidth = getCharacterWidth( canvasIndex, dataBlock.plainContent[i], style )
tempLineWidth += charWidth
if (tempLineWidth<=maxLineWidth){ if (tempLineWidth<=maxLineWidth){
// can be added to the line // // can be added to the line //
}else{ }else{
// cannot add this// new line should be added// // cannot add this// new line should be added//
i = wordEndIndex; i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex ) lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
lineObj = new getLineObj() lineObj = new getLineObj()
lineObj.charStartIndex = i lineObj.charStartIndex = i
...@@ -238,17 +243,30 @@ var ADocEditor = function (customConfig) { ...@@ -238,17 +243,30 @@ var ADocEditor = function (customConfig) {
lines.push( ...dataLineArr ) lines.push( ...dataLineArr )
function getCharacterWidth(ctx, char, style){
ctx.save()
ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
ctx.restore() ctx.restore()
return ctx.measureText(char).width return true
} }
function renderTheLines(){
let canvas = canvasList[0].el
ctx = canvas.getContext('2d', {willReadFrequently: true })
let x = 0
let y = 0
for (let l=0; l<lines.length; l++){
let style = dataSet[ lines[l].dataSetIndex ].style
if ( dataSet[ lines[l].dataSetIndex ]?.formatedText?.[lines[l].charStartIndex] ){
style = dataSet[ lines[l].dataSetIndex ]?.formatedText?.[lines[l].charStartIndex]
}
let maxFontSize = style.fontSize
y += maxFontSize
ctx.save()
ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}`
ctx.fillText( lines[l].plainContent, x,y )
ctx.restore() ctx.restore()
return true }
} }
if (!caretData.blink && caretData.activeData) renderCaret() if (!caretData.blink && caretData.activeData) renderCaret()
...@@ -276,6 +294,16 @@ var ADocEditor = function (customConfig) { ...@@ -276,6 +294,16 @@ var ADocEditor = function (customConfig) {
ctx.restore() ctx.restore()
} }
function getCharacterWidth(canvasIndex, char, style){
let canvas = canvasList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
ctx.font = `${style?.bold?'bold ':''}${style?.italic?'italic ':''} ${style.fontSize}px ${style.fontFamily}`
ctx.fillStyle = `${style?.fontColor}`
let width = ctx.measureText(char).width
ctx.restore()
return width
}
function createCanvas() { function createCanvas() {
let canvas = document.createElement('canvas') let canvas = document.createElement('canvas')
...@@ -388,9 +416,7 @@ var ADocEditor = function (customConfig) { ...@@ -388,9 +416,7 @@ var ADocEditor = function (customConfig) {
} }
function setCaretPosition(e) { function setCaretPosition(e) {
console.log('to set caret position, on click')
let rect = e.target.getBoundingClientRect() let rect = e.target.getBoundingClientRect()
// console.log('rect', rect)
let position = { let position = {
xP: e.offsetX / rect.width, xP: e.offsetX / rect.width,
yP: e.offsetY / rect.height, yP: e.offsetY / rect.height,
...@@ -399,7 +425,6 @@ var ADocEditor = function (customConfig) { ...@@ -399,7 +425,6 @@ var ADocEditor = function (customConfig) {
position.x = position.xP * config.pageSetup.canvasWidth position.x = position.xP * config.pageSetup.canvasWidth
position.y = position.yP * config.pageSetup.canvasHeight position.y = position.yP * config.pageSetup.canvasHeight
let lineY = dataSet[canvasData.dataIndex].style.y let lineY = dataSet[canvasData.dataIndex].style.y
console.log('positionY', position.y, dataSet[canvasData.dataIndex].style.fontSize)
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment