给excanvas添加fillText方法

迷南。 2022-08-02 06:16 138阅读 0赞

excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意.  
比如  
1.动态生成的Canvas对象将不支持getContext方法,  
2.drawImage方法不能用Canvas对象作为第一个参数,  
3.不支持fillText等方法.  
  
本文针对以上三个问题给出改进方案.  
1.要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G\_vmlCanvasManager\_.initElement方法,由于最后的

Js代码   ![收藏代码][icon_star.png]

1.  G\_vmlCanvasManager = G\_vmlCanvasManager\_;

使得G\_vmlCanvasManager的作用域是当前window,所以在需要初始化Canvas的时候可以采用如下的方法:

Js代码   ![收藏代码][icon_star.png]

1.  var cav = document.createElement("canvas");  
2.  if(!cav.getContext) \{  
3.    G\_vmlCanvasManager.initElement(cav);  
4.  \}  
5.  var ctx = cav.getContext("2d");  
6.  ...

2.excanvas中的drawImage方法只接受Image对象为第一个参数,为了使其支持Canvas对象的绘制,可修改如下代码(在excanvas.js中检索到"contextPrototype.drawImage"所在行):

Js代码   ![收藏代码][icon_star.png]

1.  contextPrototype.drawImage = function(image, var\_args) \{  
2.      if (image.getContext) \{ // draw canvas  
3.        this.element\_.innerHTML += image.getContext("2d").element\_.innerHTML;  
4.      \}  
5.    var dx, dy, dw, dh, sx, sy, sw, sh;  
6.  .

3.fillText,measureText也已成为CanvasRenderingContext2D对象的标准方法,为了使IE也能支持,在excanvas.js中添加以下代码:

Js代码   ![收藏代码][icon_star.png]

1.  contextPrototype.measureText = function(textToDraw) \{  
2.    var hiddenSpan = document.createElement('span');  
3.    hiddenSpan.style.font = this.font;  
4.    hiddenSpan.innerHTML = textToDraw;  
5.    var bodyNode = document.getElementsByTagName("body")\[0\];  
6.    bodyNode.appendChild(hiddenSpan);  
7.    var width = hiddenSpan.offsetWidth;  
8.    bodyNode.removeChild(hiddenSpan);  
9.    return \{ "width" : width + 1\};  
10. \}  
11.   
12. contextPrototype.fillText = function(textToDraw, x, y) \{  
13.   var vmlStr = \[\];  
14.   var textHeightStr = this.font.split("px")\[0\].replace(/(^\\s+)|(\\s+$)/g, "");  
15.   var textHeight = /^\\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0;  
16.   vmlStr.push('<g\_vml\_:shape style="font:' + this.font + ';',  
17.                   ' color:' + this.fillStyle + ';',  
18.                   ' position:absolute;',  
19.                   ' left:' + x + 'px;',  
20.                   ' top:' + (y - textHeight) + 'px;',  
21.                   ' width:' + this.measureText(textToDraw).width + 'px;',  
22.                   ' height:' + textHeight + 'px;"',  
23.                   ' ><g\_vml\_:textbox inset="0,0,0,0">' + textToDraw,  
24.                   ' </g\_vml\_:textbox>',  
25.                   '</g\_vml\_:shape>');  
26.   
27.   this.element\_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));  
28. \}

其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现.  
另外在属性声明的地方要添加默认字体:

Js代码   ![收藏代码][icon_star.png]

1.      // Canvas context properties  
2.      this.strokeStyle = '\#000';  
3.      this.fillStyle = '\#000';  
4.      this.font = '12px sans-serif';  
5.  ...

如果还有其他的什么需求或是想法 欢迎与我联系 ck0123456@gmail.com

转自:http://ck-2036.iteye.com/blog/800897

[icon_star.png]: /images/20220731/3e77e0e27f984e57aeb8a45212672376.png