/** @language english
* The LGraphics class contains a set of methods that you can use to create a vector shape. Display objects that support drawing include LSprite and LShape objects. Each of these classes includes a graphics property that is a LGraphics object.
* The following are among those helper functions provided for ease of use: drawRect(), drawRoundRect(), drawArc(), and drawEllipse().
* @class LGraphics
* @extends LObject
* @constructor
* @example
* LInit(50, "legend", 800, 480, main);
* function main () {
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRect(2, "#ff0000", [10, 10, 50, 100], true, "#880088");
* }
* @examplelink <p><a href="../../../api/LGraphics/index.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
var LGraphics = (function () {
function LGraphics(){
var s = this;
LExtends(s, LObject, []);
s.type = "LGraphics";
s.color = "#000000";
s.alpha = 1;
s.bitmap = null;
s.setList = new Array();
s.showList = new Array();
}
var p = {
ll_show : function () {
var s = this, k, l = s.setList.length;
if (l == 0) {
return;
}
for (k = 0; k < l; k++) {
s.setList[k]();
}
},
clone : function () {
var s = this, a = new LGraphics(), i, l, c;
a.color = s.color;
a.alpha = s.alpha;
a.bitmap = s.bitmap;
for (i = 0, l = s.setList.length; i < l; i++) {
c = s.setList[i];
a.setList.push(c);
}
for (i = 0, l = s.showList.length; i < l; i++) {
c = s.showList[i];
a.showList.push(c);
}
return a;
},
/** @language english
* Sets or returns the style of the end caps for a line
* @method lineCap
* @param {String} value The value "round" and "square" make the lines slightly longer.
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.lineCap("butt");
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(200,20);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineCap("round");
* shape.graphics.moveTo(20,40);
* shape.graphics.lineTo(200,40);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineCap("square");
* shape.graphics.moveTo(20,60);
* shape.graphics.lineTo(200,60);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineCap.html" target="_blank">Try it »</a></p>
* @since 1.8.8
* @public
*/
lineCap : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineCap = t;
});
},
/** @language english
* The lineJoin property sets or returns the type of corner created, when two lines meet.
* @method lineJoin
* @param {String} value bevel|round|miter.
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.lineJoin("round");
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(100,50);
* shape.graphics.lineTo(20,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineJoin.html" target="_blank">Try it »</a></p>
* @since 1.8.8
* @public
*/
lineJoin : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineJoin = t;
});
},
/** @language english
* Sets or returns the current line width
* @method lineWidth
* @param {String} value the current line width.
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(2);
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(200,50);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.lineWidth(10);
* shape.graphics.moveTo(20,40);
* shape.graphics.lineTo(200,40);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineWidth.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
lineWidth : function (t) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineWidth = t;
});
},
/** @language english
* Sets or returns the color, gradient, or pattern used for strokes.
* @method strokeStyle
* @param {String} value color|gradient|pattern.
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.lineWidth(5);
* shape.graphics.lineJoin("round");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/stroke_strokeStyle.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
strokeStyle : function (co) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.strokeStyle = co;
});
},
/** @language english
* Actually draws the path you have defined
* @method stroke
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.lineWidth(5);
* shape.graphics.lineJoin("round");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/stroke_strokeStyle.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
stroke : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.stroke();
});
},
/** @language english
* Begins a path, or resets the current path
* @method beginPath
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.lineWidth(5);
* shape.graphics.strokeStyle("#FF0000");
* shape.graphics.moveTo(0,75);
* shape.graphics.lineTo(250,75);
* shape.graphics.stroke();
* shape.graphics.beginPath();
* shape.graphics.strokeStyle("#00FF00");
* shape.graphics.moveTo(50,0);
* shape.graphics.lineTo(150,130);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/beginPath.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
beginPath : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.beginPath();
});
},
/** @language english
* Creates a path from the current point back to the starting point
* @method closePath
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(20,100);
* shape.graphics.lineTo(70,100);
* shape.graphics.closePath();
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/closePath.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
closePath : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.closePath();
});
},
/** @language english
* Moves the path to the specified point in the canvas, without creating a line
* @method moveTo
* @param {float} x The x-coordinate of where to move the path to
* @param {float} y The x-coordinate of where to move the path to
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(70,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/moveTo_lineTo.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
moveTo : function (x, y) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.moveTo(x, y);
});
s.showList.push({type : LShape.POINT, arg : [x, y]});
},
/** @language english
* Adds a new point and creates a line from that point to the last specified point in the canvas
* @method lineTo
* @param {float} x The x-coordinate of where to create the line to
* @param {float} y The y-coordinate of where to create the line to
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.beginPath();
* shape.graphics.moveTo(20,20);
* shape.graphics.lineTo(70,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/moveTo_lineTo.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
lineTo : function (x, y) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.lineTo(x, y);
});
s.showList.push({type : LShape.POINT, arg : [x, y]});
},
/** @language english
* Creates a rectangle
* @method rect
* @param {float} x The x-coordinate of the upper-left corner of the rectangle
* @param {float} y The y-coordinate of the upper-left corner of the rectangle
* @param {float} width The width of the rectangle, in pixels
* @param {float} height The height of the rectangle, in pixels
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/rect.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
rect : function (x, y, w, h) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.rect(x, y, w, h);
});
s.showList.push({type : LShape.RECT, arg : [x, y, w, h]});
},
/** @language english
* Sets or returns the color, gradient, or pattern used to fill the drawing
* @method fillStyle
* @param {String} style color|gradient|pattern
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.fillStyle("#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.fill();
* @examplelink <p><a href="../../../api/LGraphics/fillStyle_fill.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
fillStyle : function (co) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.fillStyle = co;
});
},
/** @language english
* Fills the current drawing (path)
* @method fill
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.fillStyle("#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.fill();
* @examplelink <p><a href="../../../api/LGraphics/fillStyle_fill.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
fill : function () {
var s = this;
s.setList.push(function () {
LGlobal.canvas.fill();
});
},
/** @language english
* Creates an arc/curve (used to create circles, or parts of circles)
* @method arc
* @param {float} x The x-coordinate of the center of the circle
* @param {float} y The y-coordinate of the center of the circle
* @param {float} radius The radius of the circle
* @param {float} startAngle The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle)
* @param {float} endAngle The ending angle, in radians
* @param {Boolean} counterclockwise Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.arc(100,75,50,0,2*Math.PI);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/arc.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
arc : function (x, y, r, sa, ea, aw) {
var s = this;
s.setList.push(function () {
LGlobal.canvas.arc(x, y, r, sa, ea, aw);
});
s.showList.push({type : LShape.ARC, arg : sa});
},
/** @language english
* Sets the style of line
* @method lineStyle
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.lineStyle(5,"#FF0000");
* shape.graphics.rect(20,20,150,100);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/lineStyle.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
lineStyle : function (tn, co) {
var s = this, c;
if (co == null) {
co = s.color;
}
s.color = co;
s.setList.push(function () {
c = LGlobal.canvas;
c.lineWidth = tn;
c.strokeStyle = co;
});
},
/** @language english
* Clear all the vector shapes.
* @method clear
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.rect(20,20,150,100);
* shape.graphics.clear();
* shape.graphics.arc(100,75,50,0,2*Math.PI);
* shape.graphics.stroke();
* @examplelink <p><a href="../../../api/LGraphics/clear.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
clear : function () {
var s = this;
s.bitmap = null;
s.setList.length = 0;
s.showList.length = 0;
},
/** @language english
* Fills a drawing area with a bitmap image.
* @method beginBitmapFill
* @param {LBitmapData} bitmap A transparent or opaque bitmap image that contains the bits to be displayed.
* @example
* LInit(50, "legend", 800, 480, main);
* function main () {
* var loader = new LLoader();
* loader.addEventListener(LEvent.COMPLETE, loadBitmapdata);
* loader.load("face.jpg", "bitmapData");
* }
* function loadBitmapdata (event) {
* var bitmapdata = new LBitmapData(event.currentTarget);
* var backLayer;
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawArc(1,"#000000",[150,50,50,0,Math.PI*2]);
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawRect(1,"#000000",[10,100,70,100]);
* backLayer = new LSprite();
* addChild(backLayer);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawVertices(1,"#000000",[[120,100],[100,200],[200,150]]);
* }
* @examplelink <p><a href="../../../api/LGraphics/beginBitmapFill.html" target="_blank">Try it »</a></p>
* @since 1.5.0
* @public
*/
beginBitmapFill : function (b) {
var s = this;
s.setList.push(function () {
s.bitmap = b;
});
},
/** @language english
* Draws an ellipse.
* @method drawEllipse
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [x,y,width,height]:[The x location of the top-left of the bounding-box of the ellipse relative to the registration point of the parent display object (in pixels),The y location of the top left of the bounding-box of the ellipse relative to the registration point of the parent display object (in pixels),The width of the ellipse (in pixels),The height of the ellipse (in pixels)]。
* @param {Boolean} isFill Whether to Fills the current drawing
* @param {String} fillColor Fills color
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawEllipse(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawEllipse(1, "#000000", [10, 100, 50, 100], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawEllipse.html" target="_blank">Try it »</a></p>
* @since 1.8.8
* @public
*/
drawEllipse : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c, x, y, w, h, k, ox, oy, xe, ye, xm, ym;
c = LGlobal.canvas;
c.beginPath();
k = 0.5522848;
x = pa[0];
y = pa[1];
w = pa[2];
h = pa[3];
ox = (w / 2) * k;
oy = (h / 2) * k;
xe = x + w;
ye = y + h;
xm = x + w / 2;
ym = y + h / 2;
c.moveTo(x, ym);
c.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y);
c.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym);
c.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye);
c.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym);
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language english
* Draws a Circle or Sector.
* @method drawArc
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [x,y,r,sAngle,eAngle,counterclockwise,isSector]:[The x-coordinate of the center of the circle,The y-coordinate of the center of the circle,radius The radius of the circle,startAngle The starting angle,endAngle The ending angle,Specifies whether the drawing should be counterclockwise or clockwise,whether the drawing should be a sector]。
* @param {Boolean} isFill Whether to Fills the current drawing
* @param {String} fillColor Fills color
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawArc(2, "#ff0000", [50, 50, 40, 0, 2*Math.PI]);
* shape.graphics.drawArc(1, "#000000", [50, 150, 40, 0, 2*Math.PI], true, "#880088");
* shape.graphics.drawArc(2, "#ff0000", [150, 50, 40, 0, 50*Math.PI/180,false,true]);
* shape.graphics.drawArc(1, "#000000", [150, 150, 40, 0, 230*Math.PI/180,false,true], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawArc.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
drawArc : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
if (pa.length > 6 && pa[6]) {
c.moveTo(pa[0], pa[1]);
}
c.arc(pa[0], pa[1], pa[2], pa[3], pa[4], pa[5]);
if (pa.length > 6 && pa[6]) {
c.lineTo(pa[0], pa[1]);
}
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.ARC, arg : pa});
},
/** @language english
* Draws a rectangle.
* @method drawRect
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [x,y,width,height]:[A number indicating the horizontal position relative to the registration point of the parent display object,A number indicating the vertical position relative to the registration point of the parent display object,The width of the rectangle,The height of the rectangle]。
* @param {Boolean} isFill Whether to Fills the current drawing
* @param {String} fillColor Fills color
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRect(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawRect(1, "#000000", [10, 100, 50, 100], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawRect.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
drawRect : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.rect(pa[0], pa[1], pa[2], pa[3]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y,
s.bitmap.width, s.bitmap.height,
0, 0,
s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language english
* Draws a rounded rectangle.
* @method drawRoundRect
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [x,y,width,height,radius]:[A number indicating the horizontal position relative to the registration point of the parent display object,A number indicating the vertical position relative to the registration point of the parent display object,The width of the rectangle,The height of the rectangle,The size of the ellipse used to draw the rounded corners]。
* @param {Boolean} isFill Whether to Fills the current drawing
* @param {String} fillColor Fills color
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawRoundRect(2, "#ff0000", [10, 10, 100, 50, 10]);
* shape.graphics.drawRoundRect(1, "#000000", [10, 100, 50, 100, 10], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawRoundRect.html" target="_blank">Try it »</a></p>
* @since 1.7.1
* @public
*/
drawRoundRect : function (tn, lco, pa, isf, co) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(pa[0] + pa[4], pa[1]);
c.lineTo(pa[0] + pa[2] - pa[4], pa[1]);
c.arcTo(pa[0] + pa[2], pa[1], pa[0] + pa[2], pa[1] + pa[4], pa[4]);
c.lineTo(pa[0] + pa[2], pa[1] + pa[3] - pa[4]);
c.arcTo(pa[0] + pa[2], pa[1] + pa[3], pa[0] + pa[2] - pa[4], pa[1] + pa[3], pa[4]);
c.lineTo(pa[0] + pa[4], pa[1] + pa[3]);
c.arcTo(pa[0], pa[1] + pa[3], pa[0], pa[1] + pa[3] - pa[4], pa[4]);
c.lineTo(pa[0], pa[1] + pa[4]);
c.arcTo(pa[0], pa[1], pa[0] + pa[4], pa[1], pa[4]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
0, 0,
s.bitmap.width, s.bitmap.height,
0, 0,
s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
});
s.showList.push({type : LShape.RECT, arg : pa});
},
/** @language english
* Draws a Polygon.
* @method drawVertices
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [[x1,y1],[x2,y2],[x3,y3],......]
* @param {Boolean} isFill Whether to Fills the current drawing
* @param {String} fillColor Fills color
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawVertices(2, "#ff0000", [[10, 10], [60, 100], [100, 50]]);
* shape.graphics.drawVertices(2, "#ff0000", [[10, 160], [60, 250], [100, 200]], true, "#880088");
* @examplelink <p><a href="../../../api/LGraphics/drawVertices.html" target="_blank">Try it »</a></p>
* @since 1.4.1
* @public
*/
drawVertices : function (tn, lco, v, isf, co) {
var s = this;
if (v.length < 3) {
return;
}
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(v[0][0], v[0][1]);
var i, l = v.length, pa;
for (i = 1; i < l; i++) {
pa = v[i];
c.lineTo(pa[0], pa[1]);
}
c.lineTo(v[0][0], v[0][1]);
c.closePath();
if (s.bitmap) {
c.save();
c.clip();
c.drawImage(s.bitmap.image,
s.bitmap.x, s.bitmap.y, s.bitmap.width, s.bitmap.height,
0, 0, s.bitmap.width, s.bitmap.height);
c.restore();
s.bitmap = null;
return;
}
if (isf) {
c.fillStyle = co;
c.fill();
}
if (tn > 0) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.closePath();
c.stroke();
}
});
s.showList.push({type : LShape.VERTICES, arg : v});
},
/** @language english
* Renders a set of triangles, typically to distort bitmaps and give them a three-dimensional appearance. The drawTriangles() method maps either the current fill, or a bitmap fill, to the triangle faces using a set of (u,v) coordinates.
* @method drawTriangles
* @param {Array} vertices A Vector of Numbers where each pair of numbers is treated as a coordinate location (an x, y pair). The vertices parameter is required.
* @param {Array} indices A Vector of integers or indexes, where every three indexes define a triangle. If the indexes parameter is null then every three vertices (six x,y pairs in the vertices Vector) defines a triangle. Otherwise each index refers to a vertex, which is a pair of numbers in the vertices Vector. For example indexes[1] refers to (vertices[2], vertices[3]). The indexes parameter is optional, but indexes generally reduce the amount of data submitted and the amount of data computed.
* @param {Array} uvtData A Vector of normalized coordinates used to apply texture mapping. Each coordinate refers to a point on the bitmap used for the fill. You must have one UV or one UVT coordinate per vertex. In UV coordinates, (0,0) is the upper left of the bitmap, and (1,1) is the lower right of the bitmap.
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @example
* var bitmapdata = new LBitmapData(event.currentTarget);
* var backLayer = new LSprite();
* addChild(backLayer);
* var vertices = new Array();
* vertices.push(0, 0);
* vertices.push(-40, 90);
* vertices.push(0, 200);
* vertices.push(80, 0);
* vertices.push(90, 30);
* vertices.push(70,200);
* vertices.push(130, 10);
* vertices.push(140, 40);
* vertices.push(120,220);
* var indices = new Array();
* indices.push(0, 3, 1);
* indices.push(3, 1, 4);
* indices.push(1, 4, 2);
* indices.push(4, 2, 5);
* indices.push(3, 6, 4);
* indices.push(6, 4, 7);
* indices.push(4, 7, 5);
* indices.push(7, 5, 8);
* var uvtData = new Array();
* uvtData.push(0, 0);
* uvtData.push(0, 0.5);
* uvtData.push(0, 1);
* uvtData.push(0.5, 0);
* uvtData.push(0.5, 0.5);
* uvtData.push(0.5, 1);
* uvtData.push(1, 0);
* uvtData.push(1, 0.5);
* uvtData.push(1, 1);
* backLayer.graphics.beginBitmapFill(bitmapdata);
* backLayer.graphics.drawTriangles(vertices, indices, uvtData);
* @examplelink <p><a href="../../../api/LGraphics/drawTriangles.html" target="_blank">Try it »</a></p>
* @since 1.5.0
* @public
*/
drawTriangles : function (ve, ind, u, tn, lco) {
var s = this;
var i, j, l = ind.length, c;
s.setList.push(function () {
c = LGlobal.canvas;
var v = ve, a, k, sw;
for (i = 0, j = 0; i < l; i += 3) {
a = 0;
c.save();
c.beginPath();
c.moveTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.lineTo(v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.lineTo(v[ind[i + 2] * 2], v[ind[i + 2] * 2 + 1]);
c.lineTo(v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.closePath();
if (tn) {
c.lineWidth = tn;
c.strokeStyle = lco;
c.stroke();
}
c.clip();
if (i % 6 == 0) {
sw = -1;
var w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * s.bitmap.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * s.bitmap.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 1 + j] * 2] - u[ind[i + j] * 2]) * s.bitmap.width;
}
if (i + j >= l) {
w = (u[ind[i + j - l] * 2] - u[ind[i + 1] * 2]) * s.bitmap.width;
sw = u[ind[i] * 2] == 1 ? 0 : s.bitmap.width * u[ind[i] * 2] + w;
if (sw > s.bitmap.width) {
sw -= s.bitmap.width;
}
} else {
sw = s.bitmap.width * u[ind[i + j] * 2];
}
sh = s.bitmap.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * s.bitmap.height;
sh = 0;
}
var t1 = (v[ind[i + 1] * 2] - v[ind[i] * 2]) / w;
var t2 = (v[ind[i + 1] * 2 + 1] - v[ind[i] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i] * 2], v[ind[i] * 2 + 1]);
c.drawImage(s.bitmap.image,
s.bitmap.x + sw,
s.bitmap.y + sh,
w, h,
0, 0,
w, h);
} else {
var w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * s.bitmap.width;
var h = (u[ind[i + 2] * 2 + 1] - u[ind[i] * 2 + 1]) * s.bitmap.height;
if (j == 0 && w < 0) {
for (k = i + 9; k < l; k += 3) {
if (u[ind[i + 2] * 2 + 1] == u[ind[k + 2] * 2 + 1]) {
j = k - i;
break;
}
}
if (j == 0) {
j = l - i;
}
w = (u[ind[i + 2 + j] * 2] - u[ind[i + 1 + j] * 2]) * s.bitmap.width;
}
if (i + 1 + j >= l) {
w = (u[ind[i + 1 + j - l] * 2] - u[ind[i + 2] * 2]) * s.bitmap.width;
sw = u[ind[i + 1] * 2] == 1 ? 0 : s.bitmap.width * u[ind[i + 1] * 2] + w;
if (sw > s.bitmap.width) {
sw -= s.bitmap.width;
}
} else {
sw = s.bitmap.width * u[ind[i + 1 + j] * 2];
}
sh = s.bitmap.height * u[ind[i] * 2 + 1];
if (h < 0) {
h = (u[ind[i + 2 - (i > 0 ? 6 : -6)] * 2 + 1] - u[ind[i - (i > 0 ? 6 : -6)] * 2 + 1]) * s.bitmap.height;
sh = 0;
}
var t1 = (v[ind[i + 2] * 2] - v[ind[i + 1] * 2]) / w;
var t2 = (v[ind[i + 2] * 2 + 1] - v[ind[i + 1] * 2 + 1]) / w;
var t3 = (v[ind[i + 2] * 2] - v[ind[i] * 2]) / h;
var t4 = (v[ind[i + 2] * 2 + 1] - v[ind[i] * 2 + 1]) / h;
c.transform(t1, t2, t3, t4, v[ind[i + 1] * 2], v[ind[i + 1] * 2 + 1]);
c.drawImage(s.bitmap.image,
s.bitmap.x + sw,
s.bitmap.y + sh,
w, h,
0, -h,
w, h);
}
c.restore();
}
});
},
/** @language english
* Draw a line
* @method drawLine
* @param {int} thickness An integer that indicates the thickness of the line in points;
* @param {String} color color|gradient|pattern
* @param {Array} param [startX,startY,endX,endY]:[The x-coordinate of the start,The y-coordinate of the start,The x-coordinate of the end,The y-coordinate of the end]。
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.drawLine(2, "#ff0000", [10, 10, 100, 50]);
* shape.graphics.drawLine(1, "#000000", [10, 100, 50, 100]);
* @examplelink <p><a href="../../../api/LGraphics/drawLine.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
drawLine : function (tn, lco, pa) {
var s = this;
s.setList.push(function () {
var c = LGlobal.canvas;
c.beginPath();
c.moveTo(pa[0], pa[1]);
c.lineTo(pa[2], pa[3]);
c.lineWidth = tn;
c.strokeStyle = lco;
c.closePath();
c.stroke();
});
s.showList.push({type : LShape.LINE, arg : pa});
},
/** @language english
* canvas's methods that you can use to create a vector shape.
* @method add
* @param {Function} func a function
* @example
* var shape = new LShape();
* addChild(shape);
* shape.graphics.add(function(){
* var ctx = LGlobal.canvas;
* ctx.beginPath();
* ctx.strokeStyle = "#FF0000";
* ctx.lineWidth = 2;
* ctx.moveTo(10,10);
* ctx.lineTo(130,30);
* ctx.stroke();
* });
* @examplelink <p><a href="../../../api/LGraphics/add.html" target="_blank">Try it »</a></p>
* @since 1.0.0
* @public
*/
add : function (f) {
this.setList.push(f);
},
ismouseon : function (e, co) {
var s = this;
if (e == null || e == UNDEFINED || s.showList.length == 0 || !s.parent) {
return false;
}
return s.parent.ismouseonShapes(s.showList, e.offsetX, e.offsetY);
},
getWidth : function () {
var s = this, k, k1, min = 0, max = 0, v, l, l1;
for (k = 0, l = s.showList.length; k < l; k++) {
if (s.showList[k].type == LShape.RECT) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[0] + s.showList[k].arg[2]) {
max = s.showList[k].arg[0] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.ARC) {
if (min > s.showList[k].arg[0] - s.showList[k].arg[2]) {
min = s.showList[k].arg[0] - s.showList[k].arg[2];
}
if (max < s.showList[k].arg[0] + s.showList[k].arg[2]) {
max = s.showList[k].arg[0] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.VERTICES) {
for (k1 = 0, l1 = s.showList[k].arg.length; k1 < l1; k1++) {
v = s.showList[k].arg[k1];
if (min > v[0]) {
min = v[0];
}
if (max < v[0]) {
max = v[0];
}
}
} else if (s.showList[k].type == LShape.LINE) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (min > s.showList[k].arg[2]) {
min = s.showList[k].arg[2];
}
if (max < s.showList[k].arg[0]) {
max = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[2]) {
max = s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.POINT) {
if (min > s.showList[k].arg[0]) {
min = s.showList[k].arg[0];
}
if (max < s.showList[k].arg[0]) {
max = s.showList[k].arg[0];
}
}
}
s.left = min;
return max - min;
},
getHeight : function () {
var s = this, k = null, k1 = null, l, l1, min = 0, max = 0, v;
for (k = 0, l = s.showList.length; k < l; k++) {
if (s.showList[k].type == LShape.RECT) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[1] + s.showList[k].arg[3]) {
max = s.showList[k].arg[1] + s.showList[k].arg[3];
}
} else if (s.showList[k].type == LShape.ARC) {
if (min > s.showList[k].arg[1] - s.showList[k].arg[2]) {
min = s.showList[k].arg[1] - s.showList[k].arg[2];
}
if (max < s.showList[k].arg[1] + s.showList[k].arg[2]) {
max = s.showList[k].arg[1] + s.showList[k].arg[2];
}
} else if (s.showList[k].type == LShape.VERTICES) {
for (k1 = 0, l1 = s.showList[k].arg.length; k1 < l1; k1++) {
v = s.showList[k].arg[k1];
if (min > v[1]) {
min = v[1];
}
if (max < v[1]) {
max = v[1];
}
}
} else if (s.showList[k].type == LShape.LINE) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (min > s.showList[k].arg[3]) {
min = s.showList[k].arg[3];
}
if (max < s.showList[k].arg[1]) {
max = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[3]) {
max = s.showList[k].arg[3];
}
} else if (s.showList[k].type == LShape.POINT) {
if (min > s.showList[k].arg[1]) {
min = s.showList[k].arg[1];
}
if (max < s.showList[k].arg[1]) {
max = s.showList[k].arg[1];
}
}
}
s.top = min;
return max - min;
},
startX : function () {
var s = this;
s.getWidth();
return s.left;
},
startY : function () {
var s = this;
s.getHeight();
return s.top;
}
};
for (var k in p) {
LGraphics.prototype[k] = p[k];
}
return LGraphics;
})();
