render the pen path with local coordinates, but use stage world coordinates to position the canvas on which the path is rendered

AND add data-montage- to the ids in the pen and brush reels AND fix a bug with pen stroke transparency not working
author: Pushkar Joshi 2012-04-02 15:25:00 -0700
committer: Pushkar Joshi 2012-04-02 15:25:00 -0700
commit: 878743cbbb75f2fc84855ca27779597b67ab1a95 (patch)
tree: 3744a6bc9ee21fde57dd3b3a1d348d070c5a74c0
parent: defde265799bb8d6826bb368f04168612e7feb5a (diff)
download: ninja-878743cbbb75f2fc84855ca27779597b67ab1a95.tar.gz
6 files changed, 269 insertions, 46 deletions
diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html
index 98442164..d9c35dc2 100755
--- a/js/components/tools-properties/brush-properties.reel/brush-properties.html
+++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -84,7 +84,7 @@
    </head>
    <body>
-        <div id="brushProperties" class="subToolHolderPanel">
+        <div data-montage-id="brushProperties" class="subToolHolderPanel">
            <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
                <label class="label"> Width:</label>
                <div id="strokeSize" class="label"></div>
diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html
index 74a3a747..acbedcac 100755
--- a/js/components/tools-properties/pen-properties.reel/pen-properties.html
+++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -39,7 +39,7 @@
    </head>
    <body>
-    <div id="penProperties" class="subToolHolderPanel">
+    <div data-montage-id="penProperties" class="subToolHolderPanel">
        <div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
            <label class="label"> Stroke:</label>
            <div id="strokeSize" class="label"></div>
diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js
index a72b7906..f60b953a 100755
--- a/js/helper-classes/3D/view-utils.js
+++ b/js/helper-classes/3D/view-utils.js
@@ -242,7 +242,6 @@ exports.ViewUtils = Montage.create(Component, {
            var worldPt = MathUtils.transformPoint( viewPt, mat );
            var stageWorldPt = this.postViewToStageWorld( worldPt, elt );
            this.popViewportObj();
            return stageWorldPt;
        }
    },
diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js
index 22209815..e93c9382 100755
--- a/js/lib/geom/brush-stroke.js
+++ b/js/lib/geom/brush-stroke.js
@@ -413,7 +413,7 @@ var BrushStroke = function GLBrushStroke() {
            this._LocalPoints[i][1]+= halfheight;
            //store the original points
-            this._OrigLocalPoints   .push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
+            this._OrigLocalPoints.push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
        }
        //update the bbox with the same adjustment as was made for the local points above
        this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth;
diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js
index 9bd9ad9a..19a1da3b 100755
--- a/js/lib/geom/sub-path.js
+++ b/js/lib/geom/sub-path.js
@@ -12,6 +12,7 @@ var AnchorPoint =   require("js/lib/geom/anchor-point").AnchorPoint;
 var MaterialsModel = require("js/models/materials-model").MaterialsModel;
 // TODO Those function do not seems to be used. We should remove them
+/*
 function SubpathOffsetPoint(pos, mapPos) {
    this.Pos = [pos[0],pos[1],pos[2]];
    this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];
@@ -33,7 +34,7 @@ function sortNumberDescending(a,b){
 function SegmentIntersections(){
    this.paramArray = [];
 }
+*/
 ///////////////////////////////////////////////////////////////////////
 // Class GLSubpath
 //      representation a sequence of cubic bezier curves.
@@ -49,15 +50,22 @@ var GLSubpath = function GLSubpath() {
    this._BBoxMax = [0, 0, 0];
    this._isClosed = false;
-    this._samples = [];                 //polyline representation of this curve
+    this._samples = [];                 //polyline representation of this curve in stage world space
-    this._sampleParam = [];            //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
+    this._sampleParam = [];             //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
    this._anchorSampleIndex = [];       //index within _samples corresponding to anchor points
-    
+    this._LocalPoints = [];             //polyline representation of this curve in canvas space
+    this._LocalBBoxMin = [0,0,0];       //bbox min point of _LocalPoints
+    this._LocalBBoxMax = [0,0,0];       //bbox max point of _LocalPoints
    this._UnprojectedAnchors = [];
    //initially set the _dirty bit so we will construct samples
    this._dirty = true;
+    //initially set the local dirty bit so we will construct local coordinates
+    this._isLocalDirty = true;
    //whether or not to use the canvas drawing to stroke/fill
    this._useCanvasDrawing = true;
@@ -69,7 +77,7 @@ var GLSubpath = function GLSubpath() {
    this._canvasY = 0;
    //stroke information
-    this._strokeWidth = 0.0;
+    this._strokeWidth = 1.0;
    this._strokeColor = [0.4, 0.4, 0.4, 1.0];
    this._strokeMaterial = null
    this._strokeStyle = "Solid";
@@ -109,6 +117,13 @@ var GLSubpath = function GLSubpath() {
        // return; //no need to do anything for now
    };
+    this._offsetLocalCoord = function(deltaW, deltaH){
+        var numPoints = this._LocalPoints.length;
+        for (var i=0;i<numPoints;i++) {
+            this._LocalPoints[i][0]+= deltaW;
+            this._LocalPoints[i][1]+= deltaH;
+        }
+    };
    //render
    //  specify how to render the subpath in Canvas2D
    this.render = function () {
@@ -116,35 +131,65 @@ var GLSubpath = function GLSubpath() {
        var world = this.getWorld();
        if (!world)  throw( "null world in subpath render" );
-         // get the context
+        // get the context
        var ctx = world.get2DContext();
-        if (!ctx)  throw ("null context in subpath render")
+        if (!ctx)  throw ("null context in subpath render");
        var numAnchors = this.getNumAnchors();
        if (numAnchors === 0) {
            return; //nothing to do for empty paths
        }
+        var useLocalCoord = true;
+        this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
-        ctx.save();
+        //build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
+        this.buildLocalCoord();
-        this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
+        //
-        var bboxMin = this.getBBoxMin();
+        var bboxWidth=0, bboxHeight=0;
-        var bboxMax = this.getBBoxMax();
+        //var bboxMid=[0,0,0];
-        var bboxWidth = bboxMax[0] - bboxMin[0];
+        if (useLocalCoord){
-        var bboxHeight = bboxMax[1] - bboxMin[1];
+            bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
-        var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
+            bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
+            //bboxMid = [0.5 * (this._LocalBBoxMax[0] + this._LocalBBoxMin[0]), 0.5 * (this._LocalBBoxMax[1] + this._LocalBBoxMin[1]), 0.5 * (this._LocalBBoxMax[2] + this._LocalBBoxMin[2])];
+        }
+        else {
+            var bboxMin = this.getBBoxMin();
+            var bboxMax = this.getBBoxMax();
+            bboxWidth = bboxMax[0] - bboxMin[0];
+            bboxHeight = bboxMax[1] - bboxMin[1];
+            //bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
+        }
        if (this._canvas) {
+            /*
+            var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
+            //compute the plane center as the midpoint of the local bbox converted to stage world space
+            var planeCenter =  ViewUtils.localToStageWorld(bboxMid, this._canvas);
+            planeCenter[0]+=400; planeCenter[1]+=300; //todo replace these lines with the correct call for the offset
+            console.log("PEN: local bboxMid: "+ bboxMid +", stage-world bboxMid: "+ planeCenter);
+            var newLeft = planeCenter[0] - 0.5*bboxWidth;
+            console.log("PEN: newLeft: "+ newLeft +", bboxWidth: "+bboxWidth);
+            newLeft = Math.round(newLeft);//Math.round(this._planeCenter[0] - 0.5 * bboxWidth);
+            console.log("PEN: newLeft rounded: "+ newLeft);
+            var newTop = Math.round(planeCenter[1] - 0.5 * bboxHeight);//Math.round(this._planeCenter[1] - 0.5 * bboxHeight);
+            //assign the new position, width, and height as the canvas dimensions through the canvas controller
+            CanvasController.setProperty(this._canvas, "left", newLeft+"px");
+            CanvasController.setProperty(this._canvas, "top", newTop+"px");
            CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
            CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
            this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
+            */
        }
+        ctx.save();
        ctx.clearRect(0, 0, bboxWidth, bboxHeight);
        ctx.lineWidth = this._strokeWidth;
        ctx.strokeStyle = "black";
        if (this._strokeColor) {
-            ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
+            //ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
+            var strokeColorStr = "rgba("+parseInt(255*this._strokeColor[0])+","+parseInt(255*this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
+            ctx.strokeStyle = strokeColorStr;
        }
author	Pushkar Joshi	2012-04-02 15:25:00 -0700
committer	Pushkar Joshi	2012-04-02 15:25:00 -0700
commit	878743cbbb75f2fc84855ca27779597b67ab1a95 (patch)
tree	3744a6bc9ee21fde57dd3b3a1d348d070c5a74c0
parent	defde265799bb8d6826bb368f04168612e7feb5a (diff)
download	ninja-878743cbbb75f2fc84855ca27779597b67ab1a95.tar.gz

diff --git a/js/components/tools-properties/brush-properties.reel/brush-properties.html b/js/components/tools-properties/brush-properties.reel/brush-properties.html index 98442164..d9c35dc2 100755 --- a/js/components/tools-properties/brush-properties.reel/brush-properties.html +++ b/js/components/tools-properties/brush-properties.reel/brush-properties.html
@@ -84,7 +84,7 @@
84	</head>	84	</head>
85		85
86	<body>	86	<body>
87	<div id="brushProperties" class="subToolHolderPanel">	87	<div data-montage-id="brushProperties" class="subToolHolderPanel">
88	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	88	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
89	<label class="label"> Width:</label>	89	<label class="label"> Width:</label>
90	<div id="strokeSize" class="label"></div>	90	<div id="strokeSize" class="label"></div>


diff --git a/js/components/tools-properties/pen-properties.reel/pen-properties.html b/js/components/tools-properties/pen-properties.reel/pen-properties.html index 74a3a747..acbedcac 100755 --- a/js/components/tools-properties/pen-properties.reel/pen-properties.html +++ b/js/components/tools-properties/pen-properties.reel/pen-properties.html
@@ -39,7 +39,7 @@
39	</head>	39	</head>
40		40
41	<body>	41	<body>
42	<div id="penProperties" class="subToolHolderPanel">	42	<div data-montage-id="penProperties" class="subToolHolderPanel">
43	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">	43	<div id="strokesContainer" class="leftLabel" style="margin-left:25px; padding-top: 3px;">
44	<label class="label"> Stroke:</label>	44	<label class="label"> Stroke:</label>
45	<div id="strokeSize" class="label"></div>	45	<div id="strokeSize" class="label"></div>


diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index a72b7906..f60b953a 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js
@@ -242,7 +242,6 @@ exports.ViewUtils = Montage.create(Component, {
242	var worldPt = MathUtils.transformPoint( viewPt, mat );	242	var worldPt = MathUtils.transformPoint( viewPt, mat );
243	var stageWorldPt = this.postViewToStageWorld( worldPt, elt );	243	var stageWorldPt = this.postViewToStageWorld( worldPt, elt );
244	this.popViewportObj();	244	this.popViewportObj();
245
246	return stageWorldPt;	245	return stageWorldPt;
247	}	246	}
248	},	247	},


diff --git a/js/lib/geom/brush-stroke.js b/js/lib/geom/brush-stroke.js index 22209815..e93c9382 100755 --- a/js/lib/geom/brush-stroke.js +++ b/js/lib/geom/brush-stroke.js
@@ -413,7 +413,7 @@ var BrushStroke = function GLBrushStroke() {
413	this._LocalPoints[i][1]+= halfheight;	413	this._LocalPoints[i][1]+= halfheight;
414		414
415	//store the original points	415	//store the original points
416	this._OrigLocalPoints .push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);	416	this._OrigLocalPoints.push([this._LocalPoints[i][0],this._LocalPoints[i][1],this._LocalPoints[i][2]]);
417	}	417	}
418	//update the bbox with the same adjustment as was made for the local points above	418	//update the bbox with the same adjustment as was made for the local points above
419	this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth;	419	this._BBoxMax[0]+= halfwidth;this._BBoxMin[0]+= halfwidth;


diff --git a/js/lib/geom/sub-path.js b/js/lib/geom/sub-path.js index 9bd9ad9a..19a1da3b 100755 --- a/js/lib/geom/sub-path.js +++ b/js/lib/geom/sub-path.js
@@ -12,6 +12,7 @@ var AnchorPoint = require("js/lib/geom/anchor-point").AnchorPoint;
12	var MaterialsModel = require("js/models/materials-model").MaterialsModel;	12	var MaterialsModel = require("js/models/materials-model").MaterialsModel;
13		13
14	// TODO Those function do not seems to be used. We should remove them	14	// TODO Those function do not seems to be used. We should remove them
		15	/*
15	function SubpathOffsetPoint(pos, mapPos) {	16	function SubpathOffsetPoint(pos, mapPos) {
16	this.Pos = [pos[0],pos[1],pos[2]];	17	this.Pos = [pos[0],pos[1],pos[2]];
17	this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];	18	this.CurveMapPos = [mapPos[0], mapPos[1], mapPos[2]];
@@ -33,7 +34,7 @@ function sortNumberDescending(a,b){
33	function SegmentIntersections(){	34	function SegmentIntersections(){
34	this.paramArray = [];	35	this.paramArray = [];
35	}	36	}
36		37	*/
37	///////////////////////////////////////////////////////////////////////	38	///////////////////////////////////////////////////////////////////////
38	// Class GLSubpath	39	// Class GLSubpath
39	// representation a sequence of cubic bezier curves.	40	// representation a sequence of cubic bezier curves.
@@ -49,15 +50,22 @@ var GLSubpath = function GLSubpath() {
49	this._BBoxMax = [0, 0, 0];	50	this._BBoxMax = [0, 0, 0];
50	this._isClosed = false;	51	this._isClosed = false;
51		52
52	this._samples = []; //polyline representation of this curve	53	this._samples = []; //polyline representation of this curve in stage world space
53	this._sampleParam = []; //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)	54	this._sampleParam = []; //parametric distance of samples, within [0, N], where N is # of Bezier curves (=# of anchor points if closed, =#anchor pts -1 if open)
54	this._anchorSampleIndex = []; //index within _samples corresponding to anchor points	55	this._anchorSampleIndex = []; //index within _samples corresponding to anchor points
55		56
		57	this._LocalPoints = []; //polyline representation of this curve in canvas space
		58	this._LocalBBoxMin = [0,0,0]; //bbox min point of _LocalPoints
		59	this._LocalBBoxMax = [0,0,0]; //bbox max point of _LocalPoints
		60
56	this._UnprojectedAnchors = [];	61	this._UnprojectedAnchors = [];
57		62
58	//initially set the _dirty bit so we will construct samples	63	//initially set the _dirty bit so we will construct samples
59	this._dirty = true;	64	this._dirty = true;
60		65
		66	//initially set the local dirty bit so we will construct local coordinates
		67	this._isLocalDirty = true;
		68
61	//whether or not to use the canvas drawing to stroke/fill	69	//whether or not to use the canvas drawing to stroke/fill
62	this._useCanvasDrawing = true;	70	this._useCanvasDrawing = true;
63		71
@@ -69,7 +77,7 @@ var GLSubpath = function GLSubpath() {
69	this._canvasY = 0;	77	this._canvasY = 0;
70		78
71	//stroke information	79	//stroke information
72	this._strokeWidth = 0.0;	80	this._strokeWidth = 1.0;
73	this._strokeColor = [0.4, 0.4, 0.4, 1.0];	81	this._strokeColor = [0.4, 0.4, 0.4, 1.0];
74	this._strokeMaterial = null	82	this._strokeMaterial = null
75	this._strokeStyle = "Solid";	83	this._strokeStyle = "Solid";
@@ -109,6 +117,13 @@ var GLSubpath = function GLSubpath() {
109	// return; //no need to do anything for now	117	// return; //no need to do anything for now
110	};	118	};
111		119
		120	this._offsetLocalCoord = function(deltaW, deltaH){
		121	var numPoints = this._LocalPoints.length;
		122	for (var i=0;i<numPoints;i++) {
		123	this._LocalPoints[i][0]+= deltaW;
		124	this._LocalPoints[i][1]+= deltaH;
		125	}
		126	};
112	//render	127	//render
113	// specify how to render the subpath in Canvas2D	128	// specify how to render the subpath in Canvas2D
114	this.render = function () {	129	this.render = function () {
@@ -116,35 +131,65 @@ var GLSubpath = function GLSubpath() {
116	var world = this.getWorld();	131	var world = this.getWorld();
117	if (!world) throw( "null world in subpath render" );	132	if (!world) throw( "null world in subpath render" );
118		133
119	// get the context	134	// get the context
120	var ctx = world.get2DContext();	135	var ctx = world.get2DContext();
121	if (!ctx) throw ("null context in subpath render")	136	if (!ctx) throw ("null context in subpath render");
122		137
123	var numAnchors = this.getNumAnchors();	138	var numAnchors = this.getNumAnchors();
124	if (numAnchors === 0) {	139	if (numAnchors === 0) {
125	return; //nothing to do for empty paths	140	return; //nothing to do for empty paths
126	}	141	}
		142	var useLocalCoord = true;
		143	this.createSamples(); //dirty bit checked in this function...will generate a polyline representation
127		144
128	ctx.save();	145	//build the coordinates of the samples in 2D (canvas) space (localDirty bit checked in buildLocalCoord
		146	this.buildLocalCoord();
129		147
130	this.createSamples(); //dirty bit checked in this function...will generate a polyline representation	148	//
131	var bboxMin = this.getBBoxMin();	149	var bboxWidth=0, bboxHeight=0;
132	var bboxMax = this.getBBoxMax();	150	//var bboxMid=[0,0,0];
133	var bboxWidth = bboxMax[0] - bboxMin[0];	151	if (useLocalCoord){
134	var bboxHeight = bboxMax[1] - bboxMin[1];	152	bboxWidth = this._LocalBBoxMax[0] - this._LocalBBoxMin[0];
135	var bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];	153	bboxHeight = this._LocalBBoxMax[1] - this._LocalBBoxMin[1];
		154	//bboxMid = [0.5 * (this._LocalBBoxMax[0] + this._LocalBBoxMin[0]), 0.5 * (this._LocalBBoxMax[1] + this._LocalBBoxMin[1]), 0.5 * (this._LocalBBoxMax[2] + this._LocalBBoxMin[2])];
		155	}
		156	else {
		157	var bboxMin = this.getBBoxMin();
		158	var bboxMax = this.getBBoxMax();
		159	bboxWidth = bboxMax[0] - bboxMin[0];
		160	bboxHeight = bboxMax[1] - bboxMin[1];
		161	//bboxMid = [0.5 * (bboxMax[0] + bboxMin[0]), 0.5 * (bboxMax[1] + bboxMin[1]), 0.5 * (bboxMax[2] + bboxMin[2])];
		162	}
136		163
137	if (this._canvas) {	164	if (this._canvas) {
		165	/*
		166	var ViewUtils = require("js/helper-classes/3D/view-utils").ViewUtils;
		167	//compute the plane center as the midpoint of the local bbox converted to stage world space
		168	var planeCenter = ViewUtils.localToStageWorld(bboxMid, this._canvas);
		169	planeCenter[0]+=400; planeCenter[1]+=300; //todo replace these lines with the correct call for the offset
		170	console.log("PEN: local bboxMid: "+ bboxMid +", stage-world bboxMid: "+ planeCenter);
		171	var newLeft = planeCenter[0] - 0.5*bboxWidth;
		172	console.log("PEN: newLeft: "+ newLeft +", bboxWidth: "+bboxWidth);
		173	newLeft = Math.round(newLeft);//Math.round(this._planeCenter[0] - 0.5 * bboxWidth);
		174	console.log("PEN: newLeft rounded: "+ newLeft);
		175	var newTop = Math.round(planeCenter[1] - 0.5 * bboxHeight);//Math.round(this._planeCenter[1] - 0.5 * bboxHeight);
		176	//assign the new position, width, and height as the canvas dimensions through the canvas controller
		177	CanvasController.setProperty(this._canvas, "left", newLeft+"px");
		178	CanvasController.setProperty(this._canvas, "top", newTop+"px");
138	CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");	179	CanvasController.setProperty(this._canvas, "width", bboxWidth+"px");
139	CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");	180	CanvasController.setProperty(this._canvas, "height", bboxHeight+"px");
140	this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);	181	this._canvas.elementModel.shapeModel.GLWorld.setViewportFromCanvas(this._canvas);
		182	*/
141	}	183	}
		184	ctx.save();
142	ctx.clearRect(0, 0, bboxWidth, bboxHeight);	185	ctx.clearRect(0, 0, bboxWidth, bboxHeight);
143		186
144	ctx.lineWidth = this._strokeWidth;	187	ctx.lineWidth = this._strokeWidth;
145	ctx.strokeStyle = "black";	188	ctx.strokeStyle = "black";
146	if (this._strokeColor) {	189	if (this._strokeColor) {
147	ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );	190	//ctx.strokeStyle = MathUtils.colorToHex( this._strokeColor );
		191	var strokeColorStr = "rgba("+parseInt(255this._strokeColor[0])+","+parseInt(255this._strokeColor[1])+","+parseInt(255*this._strokeColor[2])+","+this._strokeColor[3]+")";
		192	ctx.strokeStyle = strokeColorStr;
148	}	193	}
149