Skip to content

C
check
Commit 60e618e4 by vietdo
Options

#13518 [AAT 

1.5]大きさや色を様々なものにしたリッチテキストコンテンツをプレビュー表示すると、オブジェクト上では改行していないのに改行して表示されている
parent 7ea37699
Showing with 50 additions and 28 deletions
abvw/common/js/textObject.js
......@@ -9,14 +9,14 @@
var TEXTOBJECT = {};
/**
* get HTML Text Image URL
* get HTML Text Image URL
*/
TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var context = canvas.getContext('2d');
var dataHtml = '';
var currentLine = 0;
......@@ -27,20 +27,23 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
var hasUnderLine = false; // アンダーラインの有無
var textAlign = 'left'; // テキスト揃え
var margin = 2;
var newLine = false;
var startPoint = 0;
var flag = 0;
var frontLine = 0;
var startRight = 0;
/* remove escape charactor '\' */
dataHtml = htmlData.replace(/\\/, '');
//dataHtml = dataHtml.toLowerCase();
console.log(dataHtml)
//console.log('dataHtml:' + dataHtml);
// parse
HTMLParser(dataHtml,
{
start: function (tag, attrs, unary) {
console.log(attrs);
var t = tag.toLowerCase();
/*
* DIVタグ
*/
......@@ -49,8 +52,11 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
for (var i = 0; i < attrs.length; i++) {
var attrName = attrs[i].name.toLowerCase();
if (attrName == 'align') {
newLine = true;
align = attrs[i].escaped;
textAlign = align;
} else {
newLine = false;
}
}
if (align == 'left') {
......@@ -64,7 +70,6 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
context.textAlign = 'right';
}
}
/*
* FONTタグ
*/
......@@ -72,6 +77,7 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
var fontFace = 'ＭＳ Ｐゴシック';
var fontSize = '11px';
var fontColor = '#000000';
newLine = false;
for (var i = 0; i < attrs.length; i++) {
var attrName = attrs[i].name.toLowerCase();
......@@ -100,9 +106,9 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
context.font = fontSize + " " + "'" + fontFace + "'";
context.fillStyle = fontColor;
// 行間
// 行間
nextLinePosition = parseInt(fontSize.replace('px', '')) * (lineHeight / 100);
}
/*
......@@ -111,19 +117,27 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
if (t == 'br') {
currentLine += (nextLinePosition + margin);
}
if(newLine == true && flag > 0) {
frontLine = currentLine;
currentLine += nextLinePosition;
} else if(flag == 0){
currentLine = 20;
}
flag++;
/*
* Uタグ
*/
if (t == 'u') {
hasUnderLine = true;
} else {
hasUnderLine = false;
}
},
end: function (tag) {
var t = tag.toLowerCase();
console.log("the"+t);
/*
* Uタグ
*/
......@@ -133,7 +147,6 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
},
chars: function (text) {
// エンティティ文字を置換
// &nbsp; &gt; &lt; &amp; &yen; &copy; &reg; のみ対応
text = text.replace(/&nbsp;/g, ' ');
......@@ -143,11 +156,10 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
text = text.replace(/&copy;/g, '(C)');
text = text.replace(/&reg;/g, '(R)');
text = text.replace(/&yen;/g, '\\');
// 初期描画位置を考慮
if (currentLine == 0) {
//2014/02 フォントを大きくすると文字の上側が隠れる問題の対応
//currentLine += nextLinePosition / 2;
// currentLine += nextLinePosition / 2;
currentLine += nextLinePosition;
}
......@@ -173,38 +185,48 @@ TEXTOBJECT.getTextObjectImage = function(width, height, htmlData) {
context.strokeStyle = context.fillStyle;
context.stroke();
}
currentLine += (nextLinePosition + margin);
fillText = text.charAt(i);
}
}
if (fillText.length > 0) {
context.fillText(fillText, startPosition, currentLine + margin);
context.fillText(fillText, startPosition, currentLine + margin);
// アンダーライン
if (hasUnderLine) {
var x1, x2;
if(currentLine > frontLine) {
if(newLine == false) {
startPoint = startPosition;
} else {
startPoint = 0;
startPosition = 0;
}
} else {
startPoint = startPosition;
}
if (textAlign == 'left') {
x1 = 0;
x2 = metrices.width;
x1 = startPoint;
x2 = startPoint + metrices.width;
} else if (textAlign == 'center') {
x1 = startPosition - (metrices.width / 2);
x2 = startPosition + (metrices.width / 2);
} else if (textAlign = -'right') {
x1 = startPosition;
x2 = startPosition - metrices.width;
x1 = startPoint - (metrices.width / 2);
x2 = startPoint + (metrices.width / 2);
} else if (textAlign = 'right') {
x1 = width;
x2 = width - metrices.width;
}
context.beginPath();
context.moveTo(x1, currentLine + margin);
context.lineTo(x2, currentLine + margin);
context.lineTo(x2, currentLine + margin);
context.strokeStyle = context.fillStyle;
context.stroke();
}
currentLine += (nextLinePosition + margin);
startPosition +=metrices.width;
//currentLine += (nextLinePosition + margin);
}
}
}
);
//context.fillText("helloworld",0, currentLine + margin);
// 描画したイメージを返却する
var imageUrl = canvas.toDataURL();
return imageUrl;
......
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