Merge branch 'master' of https://www.github.com/ecomfe/echarts

src/component/legend/LegendView.js

@@ -211,7 +211,13 @@ define(function (require) {
             // Use user given icon first
             legendSymbolType = itemIcon || legendSymbolType;
             itemGroup.add(symbolCreator.createSymbol(
-                legendSymbolType, 0, 0, itemWidth, itemHeight, isSelected ? color : inactiveColor
+                legendSymbolType,
+                0,
+                0,
+                itemWidth,
+                itemHeight,
+                isSelected ? color : inactiveColor,
+                true
             ));
 
             // Compose symbols

src/util/graphic.js

@@ -80,23 +80,7 @@ define(function(require) {
             var aspect = boundingRect.width / boundingRect.height;
 
             if (layout === 'center') {
-                // Set rect to center, keep width / height ratio.
-                var width = rect.height * aspect;
-                var height;
-                if (width <= rect.width) {
-                    height = rect.height;
-                }
-                else {
-                    width = rect.width;
-                    height = width / aspect;
-                }
-                var cx = rect.x + rect.width / 2;
-                var cy = rect.y + rect.height / 2;
-
-                rect.x = cx - width / 2;
-                rect.y = cy - height / 2;
-                rect.width = width;
-                rect.height = height;
+                rect = centerGraphic(rect, boundingRect);
             }
 
             graphic.resizePath(path, rect);
@@ -104,6 +88,63 @@ define(function(require) {
         return path;
     };
 
+    graphic.makeImage = function (imageUrl, rect, layout) {
+        var path = new graphic.Image({
+            style: {
+                image: imageUrl,
+                x: rect.x,
+                y: rect.y,
+                width: rect.w,
+                height: rect.h
+            },
+            onload: function (img) {
+                if (layout === 'center') {
+                    var boundingRect = {
+                        width: img.width,
+                        height: img.height
+                    };
+
+                    var r = centerGraphic(rect, boundingRect);
+                    path.style.x = r.x;
+                    path.style.y = r.y;
+                    path.style.width = r.width;
+                    path.style.height = r.height;
+                }
+            }
+        });
+        return path;
+    };
+
+    /**
+     * Get position of centered element in bounding box.
+     *
+     * @param  {Object} rect         element local bounding box
+     * @param  {Object} boundingRect constraint bounding box
+     * @return {Object} element position containing x, y, width, and height
+     */
+    function centerGraphic(rect, boundingRect) {
+        // Set rect to center, keep width / height ratio.
+        var aspect = boundingRect.width / boundingRect.height;
+        var width = rect.height * aspect;
+        var height;
+        if (width <= rect.width) {
+            height = rect.height;
+        }
+        else {
+            width = rect.width;
+            height = width / aspect;
+        }
+        var cx = rect.x + rect.width / 2;
+        var cy = rect.y + rect.height / 2;
+
+        return {
+            x: cx - width / 2,
+            y: cy - height / 2,
+            width: width,
+            height: height
+        };
+    }
+
     graphic.mergePath = pathTool.mergePath,
 
     /**

src/util/symbol.js

@@ -310,8 +310,10 @@ define(function(require) {
          * @param {number} w
          * @param {number} h
          * @param {string} color
+         * @param {boolean} [keepAspect=false] whether to keep the ratio of w/h,
+         *                            for path and image only.
          */
-        createSymbol: function (symbolType, x, y, w, h, color) {
+        createSymbol: function (symbolType, x, y, w, h, color, keepAspect) {
             // TODO Support image object, DynamicImage.
 
             var isEmpty = symbolType.indexOf('empty') === 0;
@@ -321,18 +323,19 @@ define(function(require) {
             var symbolPath;
 
             if (symbolType.indexOf('image://') === 0) {
-                symbolPath = new graphic.Image({
-                    style: {
-                        image: symbolType.slice(8),
-                        x: x,
-                        y: y,
-                        width: w,
-                        height: h
-                    }
-                });
+                symbolPath = graphic.makeImage(
+                    symbolType.slice(8),
+                    new BoundingRect(x, y, w, h),
+                    keepAspect ? 'center' : 'cover'
+                );
             }
             else if (symbolType.indexOf('path://') === 0) {
-                symbolPath = graphic.makePath(symbolType.slice(7), {}, new BoundingRect(x, y, w, h));
+                symbolPath = graphic.makePath(
+                    symbolType.slice(7),
+                    {},
+                    new BoundingRect(x, y, w, h),
+                    keepAspect ? 'center' : 'cover'
+                );
             }
             else {
                 symbolPath = new Symbol({