在http://ck-2036.iteye.com/blog/800897 的基础上修改了一下 支持文本换行粗体斜体
因为IE8和IE8之前的版本不知道html5.所以excanvas能做一些矢量图的处理。
以下是编辑文字
contextPrototype.measureText = function(textToDraw) {
var hiddenSpan = document.createElement('span');
hiddenSpan.style.font = this.font;
hiddenSpan.innerHTML = textToDraw.replace(/\r\s/g, "<BR>");
var row = hiddenSpan.innerHTML.split("<BR>").length;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(hiddenSpan);
var width = hiddenSpan.offsetWidth;
var height = hiddenSpan.offsetHeight;
bodyNode.removeChild(hiddenSpan);
return {"width" : width + row, "height" : height + row};
};
contextPrototype.fillText = function(textToDraw, x, y) {
var vmlStr = [];
var measure = this.measureText(textToDraw);
textToDraw = textToDraw.replace(/\r\s/g, "<br>");
vmlStr.push('<g_vml_:shape style="font:' + this.font + ';',
' color:' + this.fillStyle + ';',
' position:absolute;',
' left:' + x + 'px;',
' top:' + y + 'px;',
' width:' + measure.width + 'px;',
' height:' + measure.height + 'px;"',
' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,
' </g_vml_:textbox>',
'</g_vml_:shape>');
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
};
有问题发我邮箱louxiaoling@126.com
因为IE8和IE8之前的版本不知道html5.所以excanvas能做一些矢量图的处理。
以下是编辑文字
contextPrototype.measureText = function(textToDraw) {
var hiddenSpan = document.createElement('span');
hiddenSpan.style.font = this.font;
hiddenSpan.innerHTML = textToDraw.replace(/\r\s/g, "<BR>");
var row = hiddenSpan.innerHTML.split("<BR>").length;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(hiddenSpan);
var width = hiddenSpan.offsetWidth;
var height = hiddenSpan.offsetHeight;
bodyNode.removeChild(hiddenSpan);
return {"width" : width + row, "height" : height + row};
};
contextPrototype.fillText = function(textToDraw, x, y) {
var vmlStr = [];
var measure = this.measureText(textToDraw);
textToDraw = textToDraw.replace(/\r\s/g, "<br>");
vmlStr.push('<g_vml_:shape style="font:' + this.font + ';',
' color:' + this.fillStyle + ';',
' position:absolute;',
' left:' + x + 'px;',
' top:' + y + 'px;',
' width:' + measure.width + 'px;',
' height:' + measure.height + 'px;"',
' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,
' </g_vml_:textbox>',
'</g_vml_:shape>');
this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
};
有问题发我邮箱louxiaoling@126.com