1 /**
  2  * Hilo
  3  * Copyright 2015 alibaba.com
  4  * Licensed under the MIT License
  5  */
  6 
  7 /**
  8  * @class Drawable is a wrapper of drawable images.
  9  * @param {Object} properties create Objects properties, contains all writable properties.
 10  * @module hilo/view/Drawable
 11  * @requires hilo/core/Class
 12  * @requires hilo/util/util
 13  * @property {Object} image Image to be drawed, can used by CanvasRenderingContext2D.drawImage，like HTMLImageElement、HTMLCanvasElement、HTMLVideoElement。
 14  * @property {array} rect The retangle area that image will be drawed.
 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      * Initialize drawable elements.
 26      * @param {Object} properties Properties need to be initialized.
 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          * 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 });