cc.math.Shape

Shape

A cc.math.Shape object is a collection of cc.math.Path objects plus attributes for filling and stroking each Path. It is expected to be used as a cache for complex vector objects like the ones on the baby lion demo, where each lion is composed of 156 Path objects with its own rendering attributes.

pending: add image

Instead of tracing the whole lion per frame, the Shape will cache all the geometry for the paths it contains and push it all to the screen with one single draw call. Shape objects are batched wherever is possible.

The Shape works in a sequential order like in this example:

// create an arrow path.
var shape= new cc.math.Shape().
  setStrokeStyle( "#fff" ).
  setLineWidth(3).
  setLineJoin( cc.render.LineJoin.ROUND).
  setLineCap( cc.render.LineJoin.ROUND).
  beginPath().
      moveTo(3,8).
      lineTo(15,8).
      lineTo(10,3).
    stroke().
  beginPath().
      moveTo(3,8).
      lineTo(15,8).
      lineTo(10,13).
    stroke();

// later in the code you can call:
shape.draw( ctx );

The ideas are:

• line/fill attributes are copied between newly created paths, but can have their own.
• each time beginPath is called, a new path is generated. As with cc.math.Path objects, each path can have multiple SubPaths.
• each path must be stroked of filled.
• shape.draw will draw all the Paths keeping in mind: batching and path attributes.

Shape construction

The shape is built using the same cc.math.path.Segment creation methods in the path:

beginPath();
moveTo( x, y, matrix {Float32Array=} );
lineTo( x, y, matrix {Float32Array=} );
bezierCurveTo( cp0x, cp0y, cp1x, cp1y, p2x, p2y, matrix {Float32Array=} );
quadraticCurveTo( cp0x, cp0y, p2x, p2y, matrix {Float32Array=} );
rect( x, y, width, height, matrix {Float32Array=} );
arc( x, y, radius, startAngle, endAngle, counterClockWise, matrix {Float32Array=} );
closePath();

Shape and Path attributes.

Once the fill/stroke attributes are set for a Path, the same attributes will be copied to the next Path. Stroking attributes are set on the Shape object, since for each path stroke/fill must be called.

The following methods will change Path stroke/fill attributes:

// attribute is any valid value for filling/stroking in the `cc.render.RenderingContext` scope.
setStrokeStyle( attribute );
setFillStyle( attribute );

The following methods will change Path stroking attributes:

setLineWidth( w {number} );
setMiterLimit( w {number} );
setLineCap( w {cc.render.LineCap} );
setLineJoin( w {cc.render.LineJoin} );

Path cache

For each beginPath() method call, at least a call to either stroke() or fill() must be performed. This will tell the Shape to add the path's geometry.

fill();
stroke();