From fd3cb787880b519e06c9bd0a36593e37bc0c7fbf Mon Sep 17 00:00:00 2001 From: wentin Date: Thu, 11 Dec 2014 00:41:35 -0500 Subject: [PATCH] MultipleUnderline class added --- css/underline.css | 2 +- index.html | 6 +- js/class.js | 216 ++++++++++++++++++++++++++++++++++++++--- js/guitar-string.js | 1 + js/underline-canvas.js | 10 +- js/underline.js | 18 +++- 6 files changed, 225 insertions(+), 28 deletions(-) diff --git a/css/underline.css b/css/underline.css index bf5ab1b..6e515e5 100644 --- a/css/underline.css +++ b/css/underline.css @@ -6,7 +6,7 @@ top: 0; left: 0; /*background-color: rgba(222, 222, 222, 0.5);*/ - /*z-index: -1;*/ + z-index: -1; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; diff --git a/index.html b/index.html index 54511bd..98bffcc 100644 --- a/index.html +++ b/index.html @@ -63,9 +63,9 @@ - + @@ -78,6 +78,6 @@

parapsychologist

parapsychologist

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id facere iste vero quia accusamus, quisquam inventore aliquid non veritatis, Qodi repudiandae dolore. Numquam, odit, quas. Provident doloribus sapiente dolor quia porro similique pariatur sunt rem tempore nihil, quidem blanditiis unde odit officiis aspernatur mollitia, tempora atque eius optio, harum reiciendis. Ullam veniam veritatis id cum saepe et ratione exercitationem at quasi ab temporibus, nobis omnis atque, dolorem quis libero laudantium nostrum beatae ad fuga quia dolores eum dolore! Qeicigndis tempore, neque aut numquam fugit pariatur quidem voluptatum eligendi minus, necessitatibus mollitija? Qumquam provident rem eius non accusantium magnamsolu taistepraesentium, ipsjam magni veniam placjeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio Qeicigndis tempore, neque aut numquam fugit pariatur qujidem voluptatum eligejndi minus, necessitatibus mollitia? Qumquam provident rem eius non accjusantium magnamsolu taistepraesentium, ipsam magni veniam placeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio atque ea quod nihil. Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur a reprehenderit, deleniti consectetur parapsychologiest bitis suscipit parapsychologiest hic obcaecati ipsam ullam quae, atque sint. Fugiat tenetur eos asperiores totam hic accusantium blanditiis beatae nemo deleniti. Odio repudiandae minima eius est vero blanditiis iure quia quis molestiae tempore, atque, fuga vel nihil dolo atque, fuga quisquam ab praesentium nihil perferendis, commodi odit, facere consequatur illum? Vero similique vel doloremque expedita corrupti architecto eligendi laborum magni eos et, quas obcaecati sed cum accusamus earum error quia. Eum, ipsa non officia dolorem, inventore necessitatibus cupiditate voluptatum enim suscipit repudiandae totam?

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id facere iste vero quia accusamus, quisquam inventore aliquid non veritatis, Qodi repudiandae dolore. Numquam, odit, quas. Provident doloribus sapiente dolor quia porro similique pariatur sunt rem tempore nihil, quidem blanditiis unde odit officiis aspernatur mollitia, tempora atque eius optio, harum reiciendis. Ullam veniam veritatis id cum saepe et ratione exercitationem at quasi ab temporibus, nobis omnis atque, dolorem quis libero laudantium nostrum beatae ad fuga quia dolores eum dolore! Qeicigndis tempore, neque aut numquam fugit pariatur quidem voluptatum eligendi minus, necessitatibus mollitija? Qumquam provident rem eius non accusantium magnamsolu taistepraesentium, ipsjam magni veniam placjeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio Qeicigndis tempore, neque aut numquam fugit pariatur qujidem voluptatum eligejndi minus, necessitatibus mollitia? Qumquam provident rem eius non accjusantium magnamsolu taistepraesentium, ipsam magni veniam placeat debitis suscipit corporis aspernatur assumenda, nisi voluptatibus impedit esse distinctio atque ea quod nihil. Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur Nam nihil a reprehenderit, deleniti consectetur a reprehenderit, deleniti consectetur parapsychologiest bitis suscipit parapsychologiest hic obcaecati ipsam ullam quae, atque sint. Fugiat tenetur eos asperiores totam hic accusantium blanditiis beatae nemo deleniti. Odio repudiandae minima eius est vero blanditiis iure quia quis molestiae tempore, atque, fuga vel nihil dolo atque, fuga quisquam ab praesentium nihil perferendis, commodi odit, facere consequatur illum? Vero similique vel doloremque expedita corrupti architecto eligendi laborum magni eos et, quas obcaecati sed cum accusamus earum error quia. Eum, ipsa non officia dolorem, inventore necessitatibus cupiditate voluptatum enim suscipit repudiandae totam?

diff --git a/js/class.js b/js/class.js index e51e0a4..5a1edcd 100644 --- a/js/class.js +++ b/js/class.js @@ -15,6 +15,13 @@ var getElementStyles = function(element){ var height = $this.getBoundingClientRect().height; var parentWidth = $this.parentNode.getBoundingClientRect().width; + + var offsetLeft = $this.offsetLeft; + var parentOffsetLeft = $this.parentNode.offsetLeft; + var canvasLeft = parentOffsetLeft - offsetLeft; + var textIndent = offsetLeft - parentOffsetLeft; + + // canvas.style.left= canvasLeft + 'px'; return { lineHeight: lineHeight, width: width, @@ -23,13 +30,13 @@ var getElementStyles = function(element){ fontFamily: fontFamily, fontSize: fontSize, fontStyle: fontStyle, - baselinePositionRatio: baselinePositionRatio + baselinePositionRatio: baselinePositionRatio, + canvasLeft: canvasLeft, + textIndent: textIndent } }; - - -function SingleUnderline(element, underlineStyles) { +function SingleUnderline(element, underlineStyles, elementStyles) { //ctor this.element = element; @@ -37,17 +44,18 @@ function SingleUnderline(element, underlineStyles) { this.underlineStyles = underlineStyles; - this.styles = getElementStyles(element); + // this.elementStyles = getElementStyles(element); + this.elementStyles = elementStyles; this.canvas = document.createElement("canvas"); - this.canvas.width = this.styles.width; - this.canvas.height = this.styles.height; + this.canvas.width = this.elementStyles.width; + this.canvas.height = this.elementStyles.height; this.element.appendChild(this.canvas); this.ctx = this.canvas.getContext('2d'); - this.ctx.font = this.font = this.styles.fontStyle + ' ' - + this.styles.fontSize + ' ' - + this.styles.fontFamily; + this.ctx.font = this.font = this.elementStyles.fontStyle + ' ' + + this.elementStyles.fontSize + ' ' + + this.elementStyles.fontFamily; // determine the text-underline-width / strokeWidth this.dotWidth = this.ctx.measureText('.')['width']; @@ -67,8 +75,8 @@ function SingleUnderline(element, underlineStyles) { // determine the text-underline-position / underlinePosition // text-underline-position in ratio - this.underlinePosition = parseFloat(this.styles.height) * - (1 - this.styles.baselinePositionRatio + this.underlinePosition = parseFloat(this.elementStyles.height) * + (1 - this.elementStyles.baselinePositionRatio + this.underlineStyles['text-underline-position']); if(this.strokeWidth <= 1 || (this.strokeWidth%2 && this.strokeWidth > 2)) { @@ -99,6 +107,12 @@ SingleUnderline.prototype.clear = function(){ }; +SingleUnderline.prototype.draw = function(){ + // draw + this.drawUnderline(); + this.drawHoles; +}; + SingleUnderline.prototype.drawUnderline = function(){ // draw the underline // console.log(text); @@ -116,7 +130,6 @@ SingleUnderline.prototype.drawUnderline = function(){ this.myString.draw(); } - SingleUnderline.prototype.drawHoles = function(){ // draw the font stroke @@ -129,4 +142,179 @@ SingleUnderline.prototype.drawHoles = function(){ this.ctx.lineWidth = 3 + this.strokeWidth; this.ctx.strokeStyle = 'blue'; this.ctx.strokeText(this.text, 0, 0); -} \ No newline at end of file +} + + +function MultipleUnderline(element, underlineStyles, elementStyles) { + //ctor + this.element = element; + + this.text = this.element.textContent; + + this.underlineStyles = underlineStyles; + + // this.elementStyles = getElementStyles(element); + this.elementStyles = elementStyles; + + this.canvas = document.createElement("canvas"); + this.canvas.width = this.elementStyles.width; + this.canvas.height = this.elementStyles.height; + this.canvas.style.left= this.elementStyles.canvasLeft + 'px'; + this.element.appendChild(this.canvas); + + this.ctx = this.canvas.getContext('2d'); + this.ctx.font = this.font = this.elementStyles.fontStyle + ' ' + + this.elementStyles.fontSize + ' ' + + this.elementStyles.fontFamily; + + + if (is_chrome) { + // chrome floor the lineheight when it is not a whole number + this.elementStyles.lineHeight = Math.floor(this.elementStyles.lineHeight); + } + + + // determine the text-underline-width / strokeWidth + this.dotWidth = this.ctx.measureText('.')['width']; + if (this.underlineStyles['text-underline-width'] == "auto") { + // if set to auto, calculate the optimized width based on font + if (this.dotWidth/6 <= 2) { + this.strokeWidth = Math.round( this.dotWidth/3 )/2; + } else { + this.strokeWidth = Math.round( this.dotWidth/6 ); + } + } else { + //if set to px value + this.strokeWidth = this.underlineStyles['text-underline-width']; + //get number value + this.strokeWidth = parseFloat(this.strokeWidth); + } + + // determine the text-underline-position / underlinePosition + // text-underline-position in ratio + this.underlinePosition = parseFloat(this.elementStyles.fontSize) * 0.89; + if(this.strokeWidth <= 1 || (this.strokeWidth%2 && this.strokeWidth > 2)) { + this.underlinePosition = Math.round(this.underlinePosition - 0.5) + 0.5; + } else { + this.underlinePosition = Math.round(this.underlinePosition); + } + +} + +MultipleUnderline.prototype.update = function(){ + // update + + //////////////////////// + var words = this.text.split(' '); + var line = ''; + + var linePositionY = 0; + var firstLineCount = 0; + for(var n = 0; n < words.length; n++) { + // add the whitespace after getting the width measurement + var testLine = line + words[n]; + var testLineMetrics = this.ctx.measureText(testLine); + var testLineWidth = testLineMetrics.width; + testLine = testLine + ' '; + + + if (!firstLineCount) { + //the first line, should consider startingPointX + if (testLineWidth + this.elementStyles.textIndent > this.elementStyles.parentWidth && n > 0) { + // draw the underline + // console.log(line); + var lineMetrics = this.ctx.measureText(line); + var lineWidth = lineMetrics.width; + this.ctx.globalCompositeOperation = "source-over"; + + this.ctx.strokeStyle = this.underlineStyles['text-underline-color']; + this.ctx.lineWidth = this.strokeWidth; + + this.ctx.beginPath(); + this.ctx.moveTo(this.elementStyles.textIndent, this.underlinePosition); + this.ctx.lineTo(lineWidth + this.elementStyles.textIndent - 4, this.underlinePosition); + this.ctx.stroke(); + + // draw the font stroke + + this.ctx.globalCompositeOperation = "destination-out"; + this.ctx.font = this.font; + this.ctx.fillStyle = 'green'; + this.ctx.textBaseline = 'top'; + this.ctx.fillText(line, this.elementStyles.textIndent, linePositionY); + this.ctx.lineWidth = 3 + this.strokeWidth; + this.ctx.strokeStyle = 'blue'; + this.ctx.strokeText(line, this.elementStyles.textIndent, linePositionY); + + line = words[n] + ' '; + linePositionY += this.elementStyles.lineHeight; + firstLineCount++; + } else { + line = testLine; + } + } else { + if (testLineWidth > this.elementStyles.parentWidth && n > 0) { + // draw the underline + var lineMetrics = this.ctx.measureText(line); + var lineWidth = lineMetrics.width; + + this.ctx.globalCompositeOperation = "source-over"; + + this.ctx.strokeStyle = 'orangered'; + this.ctx.lineWidth = this.strokeWidth; + this.ctx.beginPath(); + this.ctx.moveTo(0, linePositionY + this.underlinePosition); + this.ctx.lineTo(lineWidth - 4, linePositionY + this.underlinePosition); + this.ctx.stroke(); + + // draw the font stroke + this.ctx.globalCompositeOperation = "destination-out"; + this.ctx.font = this.font; + this.ctx.fillStyle = 'green'; + this.ctx.textBaseline = 'top'; + this.ctx.fillText(line, 0, linePositionY); + this.ctx.lineWidth = 3 + this.strokeWidth; + this.ctx.strokeStyle = 'blue'; + this.ctx.strokeText(line, 0, linePositionY); + + line = words[n] + ' '; + linePositionY += this.elementStyles.lineHeight; + } else { + line = testLine; + } + } + } + // draw the last line + // draw the underline + var lineMetrics = this.ctx.measureText(line); + var lineWidth = lineMetrics.width; + this.ctx.globalCompositeOperation = "source-over"; + + this.ctx.strokeStyle = 'orangered'; + this.ctx.lineWidth = this.strokeWidth; + this.ctx.beginPath(); + this.ctx.moveTo(0, linePositionY + this.underlinePosition); + this.ctx.lineTo(lineWidth - 4, linePositionY + this.underlinePosition); + this.ctx.stroke(); + + // draw the font stroke + this.ctx.globalCompositeOperation = "destination-out"; + this.ctx.font = this.font; + this.ctx.fillStyle = 'green'; + this.ctx.textBaseline = 'top'; + this.ctx.fillText(line, 0, linePositionY); + this.ctx.lineWidth = 3 + this.strokeWidth; + this.ctx.strokeStyle = 'blue'; + this.ctx.strokeText(line, 0, linePositionY); +}; + +MultipleUnderline.prototype.clear = function(){ + // clear + // this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); + +}; + +MultipleUnderline.prototype.draw = function(){ + // draw +}; + diff --git a/js/guitar-string.js b/js/guitar-string.js index 4b4a172..4dfb158 100755 --- a/js/guitar-string.js +++ b/js/guitar-string.js @@ -1,3 +1,4 @@ +var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1; var dist = function(x, y, x0, y0){ return Math.sqrt((x -= x0) * x + (y -= y0) * y); diff --git a/js/underline-canvas.js b/js/underline-canvas.js index 5037b5d..1548b3f 100644 --- a/js/underline-canvas.js +++ b/js/underline-canvas.js @@ -180,11 +180,11 @@ function drawText(canvas, text, x, y, maxWidth, textUnderlineDistance, lineHeigh posY = Math.round(posY); } - if(strokeWidth <= 1 || (strokeWidth%2 && strokeWidth > 2)) { - posY = Math.round(posY - 0.5) + 0.5; - } else { - posY = Math.round(posY); - } + // if(strokeWidth <= 1 || (strokeWidth%2 && strokeWidth > 2)) { + // posY = Math.round(posY - 0.5) + 0.5; + // } else { + // posY = Math.round(posY); + // } var words = text.split(' '); var line = ''; diff --git a/js/underline.js b/js/underline.js index ed6545b..6387ed0 100644 --- a/js/underline.js +++ b/js/underline.js @@ -12,15 +12,24 @@ window.onload = function() { var element = underlineElements[n]; - var underlineStyles = { 'text-underline-color': '#fd471e', 'text-underline-position': 0.15, // could be ratio or px 'text-underline-skip': true, 'text-underline-width': 'auto' // could be auto or px or ratio } - // debugger; - var myUnderline = new SingleUnderline(element, underlineStyles); + + + var elementStyles = getElementStyles(element); + // single line or multiple line? + if (elementStyles.height > elementStyles.lineHeight) { + // multiple lines + console.log('multiple lines'); + var myUnderline = new MultipleUnderline(element, underlineStyles, elementStyles); + } else { + // single line + var myUnderline = new SingleUnderline(element, underlineStyles, elementStyles); + } myUnderlines.push(myUnderline); } } @@ -37,8 +46,7 @@ function animate() { myUnderline.clear(); // draw stuff - myUnderline.drawUnderline(); - myUnderline.drawHoles(); + myUnderline.draw(); }