当前位置:首页 > 开发 > Web前端 > Ext > 正文

给excanvas添加fillText方法

发表于: 2010-11-02   作者:ck_2036   来源:转载   浏览次数:
摘要: excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意. 比如 1.动态生成的Canvas对象将不支持getContext方法, 2.drawImage方法不能用Canvas对象作为第一个参数, 3.不支持fillText等方法. 本文针对以上三个问题给出改进方案. 1.要使IE中的Canvas对象支持getContext等方法需要调用excanv
excanvas使得IE能通过VML支持Canvas标签,但是在一些细节方面还是不尽人意.
比如
1.动态生成的Canvas对象将不支持getContext方法,
2.drawImage方法不能用Canvas对象作为第一个参数,
3.不支持fillText等方法.

本文针对以上三个问题给出改进方案.
1.要使IE中的Canvas对象支持getContext等方法需要调用excanvas中的G_vmlCanvasManager_.initElement方法,由于最后的
G_vmlCanvasManager = G_vmlCanvasManager_;
使得G_vmlCanvasManager的作用域是当前window,所以在需要初始化Canvas的时候可以采用如下的方法:
var cav = document.createElement("canvas");
if(!cav.getContext) {
  G_vmlCanvasManager.initElement(cav);
}
var ctx = cav.getContext("2d");
...

2.excanvas中的drawImage方法只接受Image对象为第一个参数,为了使其支持Canvas对象的绘制,可修改如下代码(在excanvas.js中检索到"contextPrototype.drawImage"所在行):
  contextPrototype.drawImage = function(image, var_args) {
  	if (image.getContext) { // draw canvas
  	  this.element_.innerHTML += image.getContext("2d").element_.innerHTML;
  	}
    var dx, dy, dw, dh, sx, sy, sw, sh;
...

3.fillText,measureText也已成为CanvasRenderingContext2D对象的标准方法,为了使IE也能支持,在excanvas.js中添加以下代码:
  contextPrototype.measureText = function(textToDraw) {
    var hiddenSpan = document.createElement('span');
    hiddenSpan.style.font = this.font;
    hiddenSpan.innerHTML = textToDraw;
    var bodyNode = document.getElementsByTagName("body")[0];
    bodyNode.appendChild(hiddenSpan);
    var width = hiddenSpan.offsetWidth;
    bodyNode.removeChild(hiddenSpan);
    return {"width" : width + 1};
  }

  contextPrototype.fillText = function(textToDraw, x, y) {
    var vmlStr = [];
    var textHeightStr = this.font.split("px")[0].replace(/(^\s+)|(\s+$)/g, "");
    var textHeight = /^\d+$/.test(textHeightStr) ? parseInt(textHeightStr) : 0;
    vmlStr.push('<g_vml_:shape style="font:' + this.font + ';',
                    ' color:' + this.fillStyle + ';',
                    ' position:absolute;',
                    ' left:' + x + 'px;',
                    ' top:' + (y - textHeight) + 'px;',
                    ' width:' + this.measureText(textToDraw).width + 'px;',
                    ' height:' + textHeight + 'px;"',
                    ' ><g_vml_:textbox inset="0,0,0,0">' + textToDraw,
                    ' </g_vml_:textbox>',
                    '</g_vml_:shape>');

    this.element_.insertAdjacentHTML('BeforeEnd', vmlStr.join(''));
  }
其中measureText是通过在页面上添加一个隐藏的临时文字容器并获得其宽度来实现.
另外在属性声明的地方要添加默认字体:
    // Canvas context properties
    this.strokeStyle = '#000';
    this.fillStyle = '#000';
    this.font = '12px sans-serif';
...

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

给excanvas添加fillText方法

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
代码比较简单,需要注意的一点就是: 如果想让饼图的边框显示出来,需要找到excanvas.js中的contextP
这两天,又扩展了一下基于excanvas和jquery的拓扑功能。下来,准备增加画图工具了。 /** * @author
最近看了一下excanvas.js,感觉是个好东西。 一直想用js实现拓扑功能,正好试一下。我用的是最新版
代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
HTML5中的canvas标签可以说是很不错的,可以实现的2D图形绘制,借助JS可以制作出许多新奇的网页效果
/*-----------------------ITEYE 祈祷幸福博客原创,转载请注明。-------------------*/ 第一次认真
使用myeclipse如何在main函数中添加参数? 点击右键-->run as -->run configurations(open r
使用myeclipse如何在main函数中添加参数? 点击右键-->run as -->run configurations(open r
使用myeclipse如何在main函数中添加参数? 点击右键-->run as -->run configurations(open r
下是在VMware 中添加新的虚拟磁盘的方法: 一、VMware新增磁盘的设置步骤 (建议:在设置虚拟的时候
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号