Skip to content

Latest commit

 

History

History
295 lines (234 loc) · 14.7 KB

CanvasCircle.md

File metadata and controls

295 lines (234 loc) · 14.7 KB
Raw

CanvasCircle

Kind: global class
Npmpackage:
Properties

Name Type Description
target CanvasDrawer the CanvasDrawer element in which to draw the circle.
id string an optional STRING defining the name by which the circle will be referenced. Defaults to 'canvasdItemX' where X = the number of elements in a CanvasDrawer.
params object an object with the following properites:
params.x number NUMBER X coordinate for where to draw the image data
params.y number NUMBER Y coordinate for where to draw the image data
params.radius number NUMBER for the radius of the circle
params.width number NUMBER for the width (diameter) of the circle. Overrides radius
params.startRad number NUMBER IN RADIANS for starting angle of circle's arc
params.endRad number NUMBER IN RADIANS for ending angle of circle's arc
params.startAngle number NUMBER IN DEGREES for starting angle of circle's arc (overrides startRad)
params.endAngle number NUMBER IN DEGREES for ending angle of circle's arc (overrides endRad)
params.scale number NUMBER for uniform scale of the drawing, scaling from drawing center unless transformOrigin is changed. Will compound with but not change values of scaleX or scaleY.
params.scaleX number NUMBER for X scale of the drawing, scaling from drawing center unless transformOrigin is changed
params.scaleY number NUMBER for Y scale of the drawing, scaling from drawing center unless transformOrigin is changed
params.rotation number NUMBER IN DEGREES for the start rotation of the given drawing
params.transformOrigin string an optional STRING defining an element's origin for scale and rotation, written as two values in a string with either a '%' or 'px' marker. Defaults to '50% 50%'.
params.alpha number NUMBER for alpha of the drawing
dropShadow number an optional OBJECT defining properties of the circle's drop shadow
dropShadow.angle number NUMBER IN DEGREES for the angle to position the shadow
dropShadow.distance number NUMBER for how far away from the circle the shadow is
dropShadow.blur number NUMBER for how blurry the shadow is
dropShadow.color string | object optional color of shadow as either a HEX STRING :"#ff0000", RGB/A STRING: "rgb(255, 0, 0)" / "rgba(255, 0, 0, 1)", or an RGB/A OBJECT:{r:255,g:0,b:0} / {r:255,g:0,b:0,a:1}. Defaults to '#000000'
dropShadow.alpha number NUMBER for the alpha of the shadow. Defaults to 1, overrides the alpha of an RGBA color.
blendMode string | CanvasBlendMode an optional STRING for the globalCompositeOperation - controls overlays, screens, multiply, masking, etc. Defaults to 'source-over'.
fill string | CanvasTexture an optional STRING or gradiant variable defining the color fill of the circle. Defaults to none / invisible.
stroke string an optional OBJECT defining properties of the circle's stroke
stroke.fill string | CanvasTexture an optional STRING or gradiant variable defining the color fill of the circle stroke. Defaults to none / invisible.
stroke.width number an optional NUMBER value determining stroke width. Defaults to 0.
stroke.position string an optional STRING determining if the stroke will be 'outer' or 'center'. Defaults to 'outer', there is no 'inner'.
stroke.cap string an optional STRING value determining a line's cap style: 'butt', 'round', and 'square'. Defaults to 'butt'.

stroke.join string an optional STRING value determining how two lines/corners connect: 'round', 'bevel', and 'miter'. Defaults to 'miter'.

stroke.dashSize number an optional NUMBER value determining the length of each segment in a dashed line.
stroke.dashGap number an optional NUMBER value determining the gap between each segment in a dashed line. Defaults to 0, unless dashSize is defined, then defaults to dashSize.
stroke.dashOffset number an optional NUMBER value which offsets the positioning of the dash segments. A positive number moves them counter-clockwise. Defaults to 0.
closePath boolean an optional BOOLEAN which, on instantiation, determines if the path should be closed or not. Defaults to true; set to false if you don't want the first and last points connecting.
visible string an optional BOOLEAN that, when set to false, will not render the element. Defaults to true.

new CanvasCircle(circObj)

Add a circle shape to a CanvasDrawer based on a given object, and return a reference to that shape.

Import from ad-canvas

import { CanvasCircle } from 'ad-canvas'



Sample 1
Adding an semi-circle arc with a red fill and no lines::

var _myShape = new CanvasCircle({
	target: View.main.myCanvasDrawer,
	id: 'myCircle',
	params: {
		x: 150,
		y: 125,
		radius: 100,
		startRad: MathUtils.toRadians(0),
		endRad: MathUtils.toRadians(180)
	},
	fill: 'red'
});



Sample 2
adding the same circle using WIDTH and DEGREES instead of RADIUS and RADIANS::

var _myShape = new CanvasCircle({
	target: View.main.myCanvasDrawer,
	id: 'myCircle',
	params: {
		x:150,
		y:125,
		width:200,
		startAngle:0,
		endAngle:180
	},
	fill: 'red'
})
Param Type Description
circObj object an object containing the arguments for defining / orienting the circle, see Properties for more information

CanvasCircle.x : number

NUMBER representing the horizontal position of the element

Kind: static property of CanvasCircle

CanvasCircle.y : number

NUMBER representing the vertical position of the element

Kind: static property of CanvasCircle

CanvasCircle.width : number

NUMBER representing the total width or diameter of the element

Kind: static property of CanvasCircle

CanvasCircle.radius : number

NUMBER representing the radius of the element,

Kind: static property of CanvasCircle

CanvasCircle.rotation : number

NUMBER representing the rotation, in degrees, of the element

Kind: static property of CanvasCircle

CanvasCircle.alpha : number

NUMBER representing the opacity of the element

Kind: static property of CanvasCircle

CanvasCircle.scale : number

NUMBER representing the scale of the element. Will compound with but not change values of scaleX or scaleY

Kind: static property of CanvasCircle

CanvasCircle.scaleX : number

NUMBER representing the horizontal scale of the element

Kind: static property of CanvasCircle

CanvasCircle.scaleY : number

NUMBER representing the vertical scale of the element

Kind: static property of CanvasCircle

CanvasCircle.blendMode : number

NUMBER representing the blend or masking style applied to the element

Kind: static property of CanvasCircle

CanvasCircle.visible : boolean

BOOLEAN representing whether or not the element should be drawn,

Kind: static property of CanvasCircle

CanvasCircle.transformOrigin : string

STRING representing the origin from which to perform scales and rotations. Written as two values in a string with either a '%' or 'px' marker (ie '50% 50%' or '5px 100px').

NOTE::

  • 50% 50% is centered, based on percentage.
  • 50px 50px is 50 px away from 0% 0% vertically and horizontally.
  • 50 50 is the same as 50px 50px.
  • Values can be mixed: 50% 10px, for instance.

EXAMPLES::
View.main.myCanvasDrawer.elements.smoke.transformOrigin = '50% 50%';
View.main.myCanvasDrawer.elements.smoke.transformOrigin = '10px 100px';
View.main.myCanvasDrawer.elements.smoke.transformOrigin = '10 100';

Kind: static property of CanvasCircle

CanvasCircle.fill : string

STRING, gradient, or texture representing the color used to fill the shape

Kind: static property of CanvasCircle

CanvasCircle.strokeFill : string

STRING, gradient, or texture representing the color used to fill the shape's stroke

Kind: static property of CanvasCircle

CanvasCircle.strokeWidth : number

NUMBER representing the width of the shape's outline

Kind: static property of CanvasCircle

CanvasCircle.strokeCap : string

STRING representing how the two ends of a line form: 'butt', 'round', and 'square',

Kind: static property of CanvasCircle

CanvasCircle.strokeJoin : string

STRING representing how two lines/corners form: 'round', 'bevel', and 'miter'

Kind: static property of CanvasCircle

CanvasCircle.strokePosition : string

STRING repsenting the position of the shape's stroke, 'outer' or 'center'; there is no 'inner'

Kind: static property of CanvasCircle

CanvasCircle.strokeDashSize : number

NUMBER representing the length of each segment in a dashed line

Kind: static property of CanvasCircle

CanvasCircle.strokeDashGap : number

NUMBER representing the gap between each segment in a dashed line

Kind: static property of CanvasCircle

CanvasCircle.strokeDashOffset : number

NUMBER representing the offset positioning of the dash segments

Kind: static property of CanvasCircle

CanvasCircle.shadowColor : string

STRING representing the color of the drop shadow in RGBA format

Kind: static property of CanvasCircle

CanvasCircle.shadowBlur : number

NUMBER representing the amount of blur on the drop shadow

Kind: static property of CanvasCircle

CanvasCircle.shadowAngle : number

NUMBER representing the angle, in degrees, of the drop shadow

Kind: static property of CanvasCircle

CanvasCircle.shadowDistance : number

NUMBER representing the distance of the drop shadow from the element

Kind: static property of CanvasCircle

CanvasCircle.id : string

READ-ONLY: STRING representing the id of the element

Kind: static constant of CanvasCircle