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/Hilo 12 * @requires hilo/core/Class 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 Hilo.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 img.onload = function(){ 45 img.onload = null; 46 me.init(img); 47 }; 48 img.src = image; 49 return; 50 } 51 } 52 53 if(image && !me.rect) me.rect = [0, 0, image.width, image.height]; 54 }, 55 56 Statics: /** @lends Drawable */{ 57 /** 58 * 判断参数elem指定的元素是否可包装成Drawable对象。 59 * @param {Object} elem 要测试的对象。 60 * @return {Boolean} 如果是可包装成Drawable对象则返回true,否则为false。 61 */ 62 isDrawable: function(elem){ 63 if(!elem || !elem.tagName) return false; 64 var tagName = elem.tagName.toLowerCase(); 65 return tagName === "img" || tagName === "canvas" || tagName === "video"; 66 } 67 } 68 });