Skip to content

Commit

Permalink
multiple line fixed
Browse files Browse the repository at this point in the history
  • Loading branch information
@wentin
wentin committed Jan 24, 2015
1 parent cdc7721 commit 774257c
Show file tree
Hide file tree
Showing 3 changed files with 314 additions and 61 deletions.
130 changes: 73 additions & 57 deletions js/multiple-underline.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,48 +11,65 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
this.elementStyles = elementStyles;

this.canvas = document.createElement("canvas");
this.canvas.width = this.elementStyles.width;
this.canvas.height = this.elementStyles.height;
this.ctx = this.canvas.getContext('2d');


this.ratio = window.devicePixelRatio;
this.canvas.width = this.elementStyles.width*this.ratio;
this.canvas.height = this.elementStyles.height*this.ratio;
// this.canvas.height = this.canvas.clientHeight + this.elementStyles.lineHeight;
this.canvas.style.left = this.elementStyles.canvasLeft + 'px';
this.element.appendChild(this.canvas);
this.canvas.width = this.canvas.clientWidth;
this.canvas.height = this.canvas.clientHeight + this.elementStyles.lineHeight;
this.canvas.style.width = this.elementStyles.width + 'px';

this.ctx = this.canvas.getContext('2d');
this.ctx.font = this.font = this.elementStyles.fontStyle + ' ' + this.elementStyles.fontSize + ' ' + this.elementStyles.fontFamily;
this.ctx.font = this.font = this.elementStyles.fontStyle + ' '
+ multiplyValue(this.elementStyles.fontSize, this.ratio) + ' '
+ this.elementStyles.fontFamily;

this.multipleRedrawActive = false;
if (is_chrome) {
// chrome floor the lineheight when it is not a whole number
this.elementStyles.lineHeight = Math.floor(this.elementStyles.lineHeight);
// this.elementStyles.lineHeight = Math.floor(this.elementStyles.lineHeight * this.ratio);
this.elementStyles.lineHeight = this.elementStyles.lineHeight * this.ratio;
} else {
this.elementStyles.lineHeight = this.elementStyles.lineHeight * this.ratio;
}


// determine the text-underline-width / strokeWidth
this.dotWidth = this.ctx.measureText('.')['width'];
var 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);
}
this.strokeWidth = dotWidth/12;
} else {
//if set to px value
//if set to px value, todo: other unit such as em?
this.strokeWidth = this.underlineStyles['text-underline-width'];
//get number value
this.strokeWidth = parseFloat(this.strokeWidth);
this.strokeWidth = parseFloat(this.strokeWidth)*this.ratio;
}

// 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;
// text-underline-position in ratio, todo: default and user set position ratio
if (this.underlineStyles['text-underline-position'] == "auto") {
// if set to auto, calculate the optimized width based on font
this.underlinePosition = parseFloat(this.elementStyles.fontSize) * this.ratio
* ( 1 - this.elementStyles.baselinePositionRatio +
this.elementStyles.baselinePositionRatio * 0.4)
+ this.strokeWidth/2;
} else {
this.underlinePosition = Math.round(this.underlinePosition);
//if set to ratio value, todo: other unit such as em, px?
var userUnderlinePosition = parseFloat(this.underlineStyles['text-underline-position']);
// console.log(userUnderlinePosition);
this.underlinePosition = parseFloat(this.elementStyles.fontSize) * this.ratio *
( 1 - this.elementStyles.baselinePositionRatio +
this.elementStyles.baselinePositionRatio * userUnderlinePosition)
+ this.strokeWidth/2;
}


var adjustValue = optimalStrokeWidthPos(this.strokeWidth, this.underlinePosition);
this.strokeWidth = adjustValue.strokeWidth;
this.underlinePosition = adjustValue.posY;

this.lines = [];
this.myStrings = [];

Expand All @@ -78,7 +95,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {

if (!firstLineCount) {
//the first line, should consider startingPointX
if (testLineWidth + this.elementStyles.textIndent > this.elementStyles.parentWidth && n > 0) {
if (testLineWidth + this.elementStyles.textIndent * this.ratio > this.elementStyles.parentWidth * this.ratio && n > 0) {
// draw the underline
if (line.match(/\s+$/)) {
// the last character of line is whitespace
Expand All @@ -91,7 +108,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {

var tempLine = {
lineText: line,
lineTextIndent: this.elementStyles.textIndent,
lineTextIndent: this.elementStyles.textIndent * this.ratio - 1,
linePositionY: linePositionY,
lineMeasureWidth: lineWidth
}
Expand All @@ -104,7 +121,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
line = testLine;
}
} else {
if (testLineWidth > this.elementStyles.parentWidth && n > 0) {
if (testLineWidth > this.elementStyles.parentWidth * this.ratio && n > 0) {
// draw the underline
if (line.match(/\s+$/)) {
// the last character of line is whitespace
Expand All @@ -117,7 +134,7 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {

var tempLine = {
lineText: line,
lineTextIndent: 0,
lineTextIndent: -1,
linePositionY: linePositionY,
lineMeasureWidth: lineWidth
}
Expand Down Expand Up @@ -148,16 +165,13 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {
lineMeasureWidth: lineWidth
}
this.lines.push(tempLine);



for(var i = 0; i < this.lines.length; i++) {
var tempLine = this.lines[i];
var myString = new GuitarString(
this.ctx,
new Point(tempLine.lineTextIndent, tempLine.linePositionY + this.underlinePosition),
new Point(tempLine.lineTextIndent + tempLine.lineMeasureWidth, tempLine.linePositionY + this.underlinePosition),
this.strokeWidth, this.underlineStyles['text-underline-color'], 1);
this.strokeWidth, this.underlineStyles['text-underline-color'], this.ratio);
this.myStrings.push(myString);
}

Expand All @@ -166,6 +180,36 @@ function MultipleUnderline(element, underlineStyles, elementStyles) {

}

MultipleUnderline.prototype.drawUnderline = function(){
// draw the underline
for(var i = 0; i < this.myStrings.length; i++) {
var tempString = this.myStrings[i];
// tempString.clear();
tempString.update();
tempString.draw();
}

};


MultipleUnderline.prototype.drawHoles = function(){
// draw the font stroke
for(var i = 0; i < this.lines.length; i++) {
var tempLine = this.lines[i];

this.ctx.globalCompositeOperation = "destination-out";
this.ctx.font = this.font;

this.ctx.fillStyle = 'green';
this.ctx.textBaseline = 'top';
this.ctx.fillText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);

this.ctx.lineWidth = 2*this.ratio + this.strokeWidth*3.6;
this.ctx.strokeStyle = 'blue';
this.ctx.strokeText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);

}
}

MultipleUnderline.prototype.clear = function(){
// clear
Expand Down Expand Up @@ -207,31 +251,3 @@ MultipleUnderline.prototype.draw = function(){
};


MultipleUnderline.prototype.drawUnderline = function(){
// draw the underline
for(var i = 0; i < this.myStrings.length; i++) {
var tempString = this.myStrings[i];
// tempString.clear();
tempString.update();
tempString.draw();
}

};


MultipleUnderline.prototype.drawHoles = function(){
// draw the font stroke
for(var i = 0; i < this.lines.length; i++) {
var tempLine = this.lines[i];

this.ctx.globalCompositeOperation = "destination-out";
this.ctx.font = this.font;
this.ctx.fillStyle = 'green';
this.ctx.textBaseline = 'top';
this.ctx.fillText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);
this.ctx.lineWidth = 3 + this.strokeWidth;
this.ctx.strokeStyle = 'blue';
this.ctx.strokeText(tempLine.lineText, tempLine.lineTextIndent, tempLine.linePositionY);

}
}
Loading

0 comments on commit 774257c

Please sign in to comment.