給excanvas添加fillText方法

excanvas使得IE能通過VML支持Canvas標籤,但是在一些細節方面還是不盡人意.
比如
1.動態生成的Canvas對象將不支持getContext方法,
2.drawImage方法不能用Canvas對象作爲第一個參數,
3.不支持fillText等方法.

本文針對以上三個問題給出改進方案.
1.要使IE中的Canvas對象支持getContext等方法需要調用excanvas中的G_vmlCanvasManager_.initElement方法,由於最後的
Js代碼  收藏代碼
  1. G_vmlCanvasManager = G_vmlCanvasManager_;  
使得G_vmlCanvasManager的作用域是當前window,所以在需要初始化Canvas的時候可以採用如下的方法:
Js代碼  收藏代碼
  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代碼  收藏代碼
  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代碼  收藏代碼
  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代碼  收藏代碼
  1.     // Canvas context properties  
  2.     this.strokeStyle = '#000';  
  3.     this.fillStyle = '#000';  
  4.     this.font = '12px sans-serif';  
  5. ...  

如果還有其他的什麼需求或是想法 歡迎與我聯繫 [email protected]


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

發佈了115 篇原創文章 · 獲贊 105 · 訪問量 194萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章