      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 });