Commit 005bfb14 by ramdayalmunda

lines width calculated successfully

parent b727862d
......@@ -23,7 +23,7 @@ var ADocEditor = function (customConfig) {
fontFamily: 'Arial',
bold: false,
italic: false,
fontColor: "#0004"
fontColor: "#001"
},
}
var config = JSON.parse(JSON.stringify(defaultConfig));
......@@ -36,7 +36,14 @@ var ADocEditor = function (customConfig) {
{
id: ++counter,
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 }
}
]
......@@ -139,7 +146,6 @@ var ADocEditor = function (customConfig) {
}
function reRenderPages(dataList) {
console.clear()
if (renderInProgress) return
renderInProgress = true
......@@ -161,15 +167,14 @@ var ADocEditor = function (customConfig) {
for (let i = 0; i < dataList.length; i++) {
let canvas = canvasList[canvasIndex].el
canvas.setAttribute("tabIndex", -1)
calculateTextSizeAndPosition(canvas, i)
calculateTextSizeAndPosition(canvasIndex, i)
}
console.log(dataList[0].plainContent.length, dataList[0].plainContent)
console.log('lines', lines)
renderTheLines()
function calculateTextSizeAndPosition(canvas, dataSetIndex) {
function calculateTextSizeAndPosition(canvasIndex, dataSetIndex) {
let dataBlock = dataList[dataSetIndex]
let canvas = canvasList[canvasIndex].el
let ctx = canvas.getContext('2d', { willReadFrequently: true })
ctx.save()
......@@ -181,7 +186,6 @@ var ADocEditor = function (customConfig) {
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
plainContent: "",
formatedText: [], // { x: 10, y: 25 }, // bold,italic, fontSize, can be pulled from "dataSet"
fontSize: 0,
maxFontSize: 0,
......@@ -206,15 +210,16 @@ var ADocEditor = function (customConfig) {
if ( /\s/.test(dataBlock.plainContent[i]) ){
wordEndIndex = i
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){
// can be added to the line //
}else{
// cannot add this// new line should be added//
i = wordEndIndex;
lineObj.plainContent = dataBlock.plainContent.slice( lineObj.charStartIndex, lineObj.charEndIndex )
lineObj = new getLineObj()
lineObj.charStartIndex = i
......@@ -238,17 +243,30 @@ var ADocEditor = function (customConfig) {
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()
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()
return true
}
}
if (!caretData.blink && caretData.activeData) renderCaret()
......@@ -276,6 +294,16 @@ var ADocEditor = function (customConfig) {
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() {
let canvas = document.createElement('canvas')
......@@ -388,9 +416,7 @@ var ADocEditor = function (customConfig) {
}
function setCaretPosition(e) {
console.log('to set caret position, on click')
let rect = e.target.getBoundingClientRect()
// console.log('rect', rect)
let position = {
xP: e.offsetX / rect.width,
yP: e.offsetY / rect.height,
......@@ -399,7 +425,6 @@ var ADocEditor = function (customConfig) {
position.x = position.xP * config.pageSetup.canvasWidth
position.y = position.yP * config.pageSetup.canvasHeight
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