1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * @class Drawable是可绘制图像的包装。
  9  * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。
 10  * @module hilo/view/Drawable
 11  * @requires hilo/core/Class
 12  * @requires hilo/util/util
 13  * @property {Object} image 要绘制的图像。即可被CanvasRenderingContext2D.drawImage使用的对象类型，可以是HTMLImageElement、HTMLCanvasElement、HTMLVideoElement等对象。
 14  * @property {array} rect 要绘制的图像的矩形区域。
 15  */
 16 var Drawable = Class.create(/** @lends Drawable.prototype */{
 17     constructor: function(properties){
 18         this.init(properties);
 19     },
 20 
 21     image: null,
 22     rect: null,
 23 
 24     /**
 25      * 初始化可绘制对象。
 26      * @param {Object} properties 要初始化的属性。
 27      */
 28     init: function(properties){
 29         var me = this, oldImage = me.image;
 30         if(Drawable.isDrawable(properties)){
 31             me.image = properties;
 32         }else{
 33             util.copy(me, properties, true);
 34         }
 35 
 36         var image = me.image;
 37         if(typeof image === 'string'){
 38             if(oldImage && image === oldImage.getAttribute('src')){
 39                 image = me.image = oldImage;
 40             }else{
 41                 me.image = null;
 42                 //load image dynamically
 43                 var img = new Image();
 44                 if(properties.crossOrigin){
 45                     img.crossOrigin = "Anonymous";
 46                 }
 47                 img.onload = function(){
 48                     img.onload = null;
 49                     me.init(img);
 50                 };
 51                 img.src = image;
 52                 return;
 53             }
 54         }
 55 
 56         if(image && !me.rect) me.rect = [0, 0, image.width, image.height];
 57     },
 58 
 59     Statics: /** @lends Drawable */{
 60         /**
 61          * 判断参数elem指定的元素是否可包装成Drawable对象。
 62          * @param {Object} elem 要测试的对象。
 63          * @return {Boolean} 如果是可包装成Drawable对象则返回true，否则为false。
 64          */
 65         isDrawable: function(elem){
 66             if(!elem || !elem.tagName) return false;
 67             var tagName = elem.tagName.toLowerCase();
 68             return tagName === "img" || tagName === "canvas" || tagName === "video";
 69         }
 70     }
 71 });