Top
You are looking at an outdated 7.0.0 version of this document. Switch to the 7.14.3 version to see the up to date information.

class anychart.graphics.vector.Shape Improve this Doc

Extends: anychart.graphics.vector.Element

Base class for all vector elements.
Never invoke constructor directly!

Methods Overview

Miscellaneous
fill()Sets fill as object or string.
stroke()Sets stroke using one parameter.
strokeThickness()Gets stroke thickness.

Methods Description

fill

Returns fill.

Returns:

anychart.graphics.vector.Fill - Current fill (empty fill is 'none').

Try it:

Sets fill as an object or a string.
Supported objects: Or a color as string. Can be combined with opacity: 'Color Opacity', 'red .5').

Params:

Name Type Description
value anychart.graphics.vector.Fill Fill as object or string.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

Try it:

Fill as string.
If color is set as string, like 'red .5', it has prioruty over opt_opacity, which means if fill is set as rect.fill('red 0.3', 0.7), opacity will be 0.3.

Params:

Name Type Description
color string Color as string.
opacity number Opacity.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

Try it:

Linear gradient fill.
Three modes are available:
  • ObjectBoundingBox with angle value preservation
  • ObjectBoundingBox without angle value preservation
  • UserSpaceOnUse

Modes:

ObjectBoundingBox without angle value preservation In this mode the result angle will visually correspond the original setting, non regarding browser scaling duplication (so, for objects that do not have 1:1 proportion with the original figure, the gradient angle will correspond to the initial value due to internal calculations). ObjectBoundingBox with angle value preservation In this mode, gradient vector is calculated with the preset angle, but the result gradient angle on the rendered page can be changed if the object proportion is not 1:1 in the browser. So visually the result gradient angle may not correspond to the original settings. UserSpaceOnUse In this mode gradient settings are added by gradient size and borders/coordinates, and rendering is calculated within those borders. After that, the fill is executed on the element figure according to its coordinates. More about this mode at gradientUnits.

Params:

Name Type Description
keys Array.<(anychart.graphics.vector.GradientKey|string)> Gradient keys.
angle number Gradient angle.
mode boolean | anychart.graphics.vector.Rect | Object Gradient mode.
opacity number Gradient opacity.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

Try it:

Radial gradient fill.

Params:

Name Type Description
keys Array.<(anychart.graphics.vector.GradientKey|string)> Color-stop gradient keys.
cx number X ratio of center radial gradient.
cy number Y ratio of center radial gradient.
mode anychart.graphics.math.Rect If defined then userSpaceOnUse mode else objectBoundingBox.
opacity number Opacity of the gradient.
fx number X ratio of focal point.
fy number Y ratio of focal point.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

Try it:

stroke

Returns stroke.

Returns:

anychart.graphics.vector.Stroke - Returns stroke.
Set stroke using one parameter.
Available options: Note: String parts order is significant and '3px red' is not the same as 'red 3px'.

Params:

Name Type Description
value anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string | null Stroke as '[thickness ]color[ opacity]'.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.
Sets stroke settings.
Note: When stroke properties are set both by complex stroke object properties and by stroke() method params, object properties have more priority. E.g. setting shape.stroke('10 red', 5); (or shape.stroke({color: 'red', thickness: 10}, 5); will result a red stroke with thickness 10px.

Params:

Name Type Description
value anychart.graphics.vector.Stroke | anychart.graphics.vector.ColoredFill | string Stroke style, as described above.
thickness number Line thickness. Defaults to 1.
dashpattern string Controls the pattern of dashes and gaps used to stroke paths. Dash array contains a list of white space separated lengths and percentages that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke dashpattern: '5 3 2' is equivalent to dashpattern: '5 3 2 5 3 2'.
lineJoin anychart.graphics.vector.StrokeLineJoin Line join style.
lineCap anychart.graphics.vector.StrokeLineCap Line cap style.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.

Try it:

strokeThickness

Gets stroke thickness.

Returns:

number - Thickness value.
Sets stroke thickness.

Params:

Name Type Description
value number Thickness value.

Returns:

anychart.graphics.vector.Shape - anychart.graphics.vector.Shape instance for method chaining.