1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * @language=en
  9  * @class Drawable is a wrapper of drawable images.
 10  * @param {Object} properties create Objects properties, contains all writable properties.
 11  * @module hilo/view/Drawable
 12  * @requires hilo/core/Hilo
 13  * @requires hilo/core/Class
 14  * @property {Object} image Image to be drawed, can used by CanvasRenderingContext2D.drawImage,like HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。
 15  * @property {array} rect The retangle area that image will be drawed.
 16  */
 17 var Drawable = Class.create(/** @lends Drawable.prototype */{
 18     constructor: function(properties){
 19         this.init(properties);
 20     },
 21 
 22     image: null,
 23     rect: null,
 24 
 25     /**
 26      * @language=en
 27      * Initialize drawable elements.
 28      * @param {Object} properties Properties need to be initialized.
 29      */
 30     init: function(properties){
 31         var me = this, oldImage = me.image;
 32         if(Drawable.isDrawable(properties)){
 33             me.image = properties;
 34         }else{
 35             Hilo.copy(me, properties, true);
 36         }
 37 
 38         var image = me.image;
 39         if(typeof image === 'string'){
 40             if(oldImage && image === oldImage.getAttribute('src')){
 41                 image = me.image = oldImage;
 42             }else{
 43                 me.image = null;
 44                 //load image dynamically
 45                 var img = new Image();
 46                 img.onload = function(){
 47                     img.onload = null;
 48                     me.init(img);
 49                 };
 50                 img.src = image;
 51                 return;
 52             }
 53         }
 54 
 55         if(image && !me.rect) me.rect = [0, 0, image.width, image.height];
 56     },
 57 
 58     Statics: /** @lends Drawable */{
 59         /**
 60          * @language=en
 61          * Check whether the given 'elem' and be wrapped into Drawable object.
 62          * @param {Object} elem Element to be tested.
 63          * @return {Boolean} Return true if element can be wrapped into Drawable element, otherwises return 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 });