Merge pull request cocos#679 from dabingnn/label_add_outline

add width for stroke
winnchen · May 17, 2016 · edf92d2 · edf92d2
2 parents 017f573 + a9d5ea5
commit edf92d2
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/cocos2d/core/components/CCLabelOutline.js b/cocos2d/core/components/CCLabelOutline.js
@@ -58,6 +58,7 @@ var LabelOutline = cc.Class({
          * outline.color = new cc.Color(0.5, 0.3, 0.7, 1.0);;
          */
         _color: cc.color(255,255,255,255),
+        _width: 1,
         color: {
             get: function() {
                 return this._color;
@@ -69,6 +70,25 @@ var LabelOutline = cc.Class({
                 }
             }
         },
+        /**
+         * !#en Change the outline width
+         * !#zh 改变描边的宽度
+         * @property width
+         * @type {Number}
+         * @example
+         * outline.width = 3;
+         */
+        width: {
+            get: function() {
+                return this._width;
+            },
+            set: function(value) {
+                this._width = value;
+                if(this._labelSGNode) {
+                    this._labelSGNode.setOutlineWidth(value);
+                }
+            }
+        },
     },
 
     onEnable: function () {
@@ -77,6 +97,7 @@ var LabelOutline = cc.Class({
         if(this._labelSGNode) {
             sgNode.setOutlined(true);
             sgNode.setOutlineColor(cc.color(this._color));
+            sgNode.setOutlineWidth(this._width);
         }
     },
 

diff --git a/cocos2d/core/label/CCSGLabel.js b/cocos2d/core/label/CCSGLabel.js
@@ -128,6 +128,7 @@ _ccsg.Label = _ccsg.Node.extend({
     _lineHeight: 40,
     _outlined: false,
     _outlineColor: null,
+    _outlineWidth: 1,
     _className: "Label",
 
     //fontHandle it is a system font name, ttf file path or bmfont file path.
@@ -273,6 +274,15 @@ _ccsg.Label = _ccsg.Node.extend({
         this._notifyLabelSkinDirty();
     },
 
+    setOutlineWidth: function(value) {
+        this._outlineWidth = value;
+        this._notifyLabelSkinDirty();
+    },
+
+    getOutlineWidth: function() {
+        return this._outlineWidth;
+    },
+
     _updateWrapText: function(overflow){
         if ( overflow === _ccsg.Label.Overflow.RESIZE_HEIGHT) {
             this._isWrapText = true;

diff --git a/cocos2d/core/label/CCSGLabelCanvasRenderCmd.js b/cocos2d/core/label/CCSGLabelCanvasRenderCmd.js
@@ -437,11 +437,8 @@
                 var strokeColor = this._node.getOutlineColor() || cc.color(255,255,255,255);
                 this._labelContext.globalCompositeOperation = 'source-over';
                 this._labelContext.strokeStyle = 'rgb(' + strokeColor.r + ',' + strokeColor.g + ',' + strokeColor.b + ')';
-                //draw it several times to make it clearer.
-                var strokRepeatTimes = 5;
-                for(var strokeRepeatIndex = 0; strokeRepeatIndex < strokRepeatTimes; ++strokeRepeatIndex) {
-                    this._labelContext.strokeText(this._splitedStrings[i], startPosition.x, startPosition.y + i * lineHeight);
-                }
+                this._labelContext.lineWidth = this._node.getOutlineWidth();
+                this._labelContext.strokeText(this._splitedStrings[i], startPosition.x, startPosition.y + i * lineHeight);
             }
         }