zoukankan      html  css  js  c++  java
  • 让excanvas支持动态创建的canvas标签(附演示文件)

      大名鼎鼎的excanvas让低版本IE也能支持HTML5标准的canvas标签,虽然功德无量,但也留有小小的缺憾,比如由于excanvas是在页面初始化的时候统一把所有canvas标签初始化一次。一旦动态生成或者未初始化之前就有脚本操作了canvas标签,就会报错了。

      参考ITEYE的一篇博文 给excanvas添加fillText方法 ,里面提供了不少的增强改进方法,非常值得借鉴。

      但美中不足的是,该文中对于动态创建canvas标签的初始化,解决方式不够智能,需要程序员自己额外些初始化代码。而且由于excanvas对所有canvas标签的初始化是在document准备完毕时才进行的,如果页面中有实时执行的脚本调用或创建了canvas标签,就会导致错误,因为此时canvas标签的属性和方法还没有被初始化。

      那么如何解决这个问题呢,如何让excanvas智能的处理各种情况下对canvas标签的初始化呢?非常简单,我们可以对通过对document方法的劫持重载来达到这个目的。当document的createElement、getElementById、getElementsByTagName、getElementsByName以及getElementsByClassName方法被调用时,我们可以先获取对象,然后检查对象是否为没有初始化的canvas标签,是则进行初始化,处理完成后,再把对象返回。

      具体方法是,先用一个变量缓存这些方法,然后劫持重载这些方法,重新定义为我们自己写的处理函数即可。自定义函数中,我们先用缓存的原始方法获取对象,然后检查对象是否为未初始化的canvas标签,是则进行初始化,最后将处理过的对象返回。这样一来我们就对document的几个主要的对象获取方法都进行了重载,实现了自动动态初始化canvas的目的。

      具体的JS代码如下,可自行添加到excanvas.js的最后一行之前,以确保该代码和excanvas同步工作。

    //截获并重载元素获取方法,对canvas动态初始化
    (function() {
    	var _createElement=document.createElement;
    	document.createElement=function(elementTag) {
    		var obj=_createElement(elementTag);
    		if (elementTag.toLowerCase() == 'canvas') {
    			G_vmlCanvasManager.initElement(obj);
    		}
    		return obj;
    	};
    	
    	var _getElementById=document.getElementById;
    	document.getElementById=function(elementId) {
    		var obj=_getElementById(elementId);
    		if (obj.tagName.toLowerCase() == 'canvas' && !obj.getContext) {
    			G_vmlCanvasManager.initElement(obj);
    		}
    		return obj;
    	};
    	
    	var _getElementsByTagName=document.getElementsByTagName;
    	document.getElementsByTagName=function(elementTagName) {
    		var obj=_getElementsByTagName(elementTagName);
    		for(var i=0;i<obj.length;i++) 
    		if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
    			G_vmlCanvasManager.initElement(obj[i]);
    		}
    
    		return obj;
    	};
    	
    	var _getElementsByName=document.getElementsByName;
    	document.getElementsByName=function(elementName) {
    		var obj=_getElementsByName(elementName);
    		for(var i=0;i<obj.length;i++) 
    		if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
    			G_vmlCanvasManager.initElement(obj[i]);
    		}
    
    		return obj;
    	};
    	
    	if (!document.getElementsByClassName) {   
      document.getElementsByClassName=function(className) {
       var all = document.all ? document.all : document.getElementsByTagName('*');
       var elements = new Array();
       for (var i = 0; i < all.length; i++)
         if (all[i].className == className) {
            elements[elements.length] = all[i];
          }
    
        return elements;
       };
      }
      var _getElementsByClassName=document.getElementsByClassName;
      document.getElementsByClassName=function(className) {
      	var obj = _getElementsByClassName(className);
          for (var i = 0; i < obj.length; i++)
              if (obj[i].tagName.toLowerCase() == 'canvas' && !obj[i].getContext) {
                  G_vmlCanvasManager.initElement(obj[i]);
              }
    
          return obj;
      };
    })();
    

    演示例子(IE678_ExCanvas支持测试.zip)下载 请使用IE6\7\8进行测试。

  • 相关阅读:
    解析大型.NET ERP系统 权限模块设计与实现
    Enterprise Solution 开源项目资源汇总 Visual Studio Online 源代码托管 企业管理软件开发框架
    解析大型.NET ERP系统 单据编码功能实现
    解析大型.NET ERP系统 单据标准(新增,修改,删除,复制,打印)功能程序设计
    Windows 10 部署Enterprise Solution 5.5
    解析大型.NET ERP系统 设计异常处理模块
    解析大型.NET ERP系统 业务逻辑设计与实现
    解析大型.NET ERP系统 多国语言实现
    Enterprise Solution 管理软件开发框架流程实战
    解析大型.NET ERP系统 数据审计功能
  • 原文地址:https://www.cnblogs.com/joy2code/p/2640453.html
Copyright © 2011-2022 走看看