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