1 /** 2 * Hilo 3 * Copyright 2015 alibaba.com 4 * Licensed under the MIT License 5 */ 6 7 /** 8 * @language=zh 9 * @class Drawable是可绘制图像的包装。 10 * @param {Object} properties 创建对象的属性参数。可包含此类所有可写属性。 11 * @module hilo/view/Drawable 12 * @requires hilo/core/Hilo 13 * @requires hilo/core/Class 14 * @property {Object} image 要绘制的图像。即可被CanvasRenderingContext2D.drawImage使用的对象类型,可以是HTMLImageElement、HTMLCanvasElement、HTMLVideoElement等对象。 15 * @property {array} rect 要绘制的图像的矩形区域。 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=zh 27 * 初始化可绘制对象。 28 * @param {Object} properties 要初始化的属性。 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=zh 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 });