Version 3.17.2

APIs

  • Begin typing in the search box above to see results.
Show:

CanvasShape Class

Canvas implementation of the Shape class. CanvasShape is not intended to be used directly. Instead, use the Shape class. If the browser lacks SVG capabilities but has Canvas capabilities, the Shape class will point to the CanvasShape class.

Methods

_addTransform

(
  • type
  • args
)
private

Adds a transform to the shape.

Parameters:

  • type String

    The transform being applied.

  • args Array

    The arguments for the transform.

_closePath

() private

Completes a shape or drawing

_draw

() private

Updates the shape.

_drawDashedLine

(
  • xStart
  • yStart
  • xEnd
  • yEnd
)
private

Draws a dashed line between two points.

Parameters:

  • xStart Number

    The x position of the start of the line

  • yStart Number

    The y position of the start of the line

  • xEnd Number

    The x position of the end of the line

  • yEnd Number

    The y position of the end of the line

_getContentRect

(
  • w
  • h
  • x
  • y
)
private

Calculates the bounding box for the shape.

Parameters:

  • w Number

    width of the shape

  • h Number

    height of the shape

  • x Number

    x-coordinate of the shape

  • y Number

    y-coordinate of the shape

_getDefaultFill

() private

Value function for fill attribute

Returns:

Object

_getDefaultStroke

() private

Value function for stroke attribute

Returns:

Object

_initialize

() private

Initializes the shape

_parsePathData

(
  • val
)
private

Parses path data string and call mapped methods.

Parameters:

_setFillProps

(
  • fill
)
private

Adds a fill to the shape node.

Parameters:

  • fill Object

    Properties of the fill attribute.

_setGraphic

(
  • render
)
private

Set the Graphic instance for the shape.

Parameters:

  • render Graphic | Node | HTMLElement | String

    This param is used to determine the graphic instance. If it is a Graphic instance, it will be assigned to the graphic attribute. Otherwise, a new Graphic instance will be created and rendered into the dom element that the render represents.

_strokeAndFill

(
  • Reference
)
private

Completes a stroke and/or fill operation on the context.

Parameters:

  • Reference Context

    to the context element of the canvas instance.

_strokeChangeHandler

(
  • stroke
)
private

Adds a stroke to the shape node.

Parameters:

  • stroke Object

    Properties of the stroke attribute.

_updateHandler

() private

Updates Shape based on attribute changes.

_updateTransform

() private

Applies all transforms.

addClass

(
  • className
)

Add a class name to each node.

Parameters:

  • className String

    the class name to add to the node's class attribute

compareTo

(
  • refNode
)
Boolean

Compares nodes to determine if they match. Node instances can be compared to each other and/or HTMLElements.

Parameters:

Returns:

Boolean :

True if the nodes match, false if they do not.

contains

(
  • needle
)

Determines whether the node is an ancestor of another HTML element in the DOM hierarchy.

Parameters:

Returns:

Boolean Whether or not this shape is the needle or its ancestor.

createNode

() private

Creates the dom node for the shape.

Returns:

HTMLElement

destroy

()

Destroys the shape instance.

destroy

() protected

Implementation for shape destruction

getBounds

()

Returns the bounds for a shape.

Calculates the a new bounding box from the original corner coordinates (base on size and position) and the transform matrix. The calculated bounding box is used by the graphic instance to calculate its viewBox.

Returns:

Object

getXY

()

Gets the current position of the node in page coordinates.

Returns:

Array The XY position of the shape.

init

() protected

Init method, invoked during construction. Calls initializer method.

on

(
  • type
  • callback
)
private

Overrides default on method. Checks to see if its a dom interaction event. If so, return an event attached to the node element. If not, return the normal functionality.

Parameters:

removeClass

(
  • className
)

Removes a class name from each node.

Parameters:

  • className String

    the class name to remove from the node's class attribute

rotate

(
  • deg
)

Rotates the shape clockwise around it transformOrigin.

Parameters:

  • deg Number

    The degree of the rotation.

scale

(
  • val
)

Specifies a 2d scaling operation.

Parameters:

set

(
  • name
  • value
)

Sets the value of an attribute.

Parameters:

  • name String | Object

    The name of the attribute. Alternatively, an object of key value pairs can be passed in to set multiple attributes at once.

  • value Any

    The value to set the attribute to. This value is ignored if an object is received as the name param.

setXY

(
  • Contains
)

Set the position of the shape in page coordinates, regardless of how the node is positioned.

Parameters:

  • Contains Array

    X & Y values for new position (coordinates are page-based)

skew

(
  • x
  • y
)

Skews the shape around the x-axis and y-axis.

Parameters:

  • x Number

    The value to skew on the x-axis.

  • y Number

    The value to skew on the y-axis.

skewX

(
  • x
)

Skews the shape around the x-axis.

Parameters:

skewY

(
  • y
)

Skews the shape around the y-axis.

Parameters:

test

(
  • selector
)

Test if the supplied node matches the supplied selector.

Parameters:

  • selector String

    The CSS selector to test against.

Returns:

Boolean Wheter or not the shape matches the selector.

toFront

()

Places the shape above all other shapes.

toFront

()

Places the shape underneath all other shapes.

translate

(
  • x
  • y
)

Specifies a 2d translation.

Parameters:

  • x Number

    The value to transate on the x-axis.

  • y Number

    The value to translate on the y-axis.

translateX

(
  • x
)

Translates the shape along the x-axis. When translating x and y coordinates, use the translate method.

Parameters:

  • x Number

    The value to translate.

translateY

(
  • y
)

Performs a translate on the y-coordinate. When translating x and y coordinates, use the translate method.

Parameters:

  • y Number

    The value to translate.

Properties

_bottom

Number private

Bottom edge of the path

_left

Number private

Left edge of the path

_right

Number private

Right edge of the path

_top

Number private

Top edge of the path

_transform

String private

Storage for the transform attribute.

Attributes

data

String

Represents an SVG Path string. This will be parsed and added to shape's API to represent the SVG data across all implementations. Note that when using VML or SVG implementations, part of this content will be added to the DOM using respective VML/SVG attributes. If your content comes from an untrusted source, you will need to ensure that no malicious code is included in that content.

fill

Object

Contains information about the fill of the shape.

color
The color of the fill.
opacity
Number between 0 and 1 that indicates the opacity of the fill. The default value is 1.
type
Type of fill.
solid
Solid single color fill. (default)
linear
Linear gradient fill.
radial
Radial gradient fill.

If a linear or radial is specified as the fill type. The following additional property is used:

stops
An array of objects containing the following properties:
color
The color of the stop.
opacity
Number between 0 and 1 that indicates the opacity of the stop. The default value is 1. Note: No effect for IE 6 - 8
offset
Number between 0 and 1 indicating where the color stop is positioned.

Linear gradients also have the following property:

rotation
Linear gradients flow left to right by default. The rotation property allows you to change the flow by rotation. (e.g. A rotation of 180 would make the gradient pain from right to left.)

Radial gradients have the following additional properties:

r
Radius of the gradient circle.
fx
Focal point x-coordinate of the gradient.
fy
Focal point y-coordinate of the gradient.

The corresponding SVGShape class implements the following additional properties.

cx

The x-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

Note: Currently, this property is not implemented for corresponding CanvasShape and VMLShape classes which are used on Android or IE 6 - 8.

cy

The y-coordinate of the center of the gradient circle. Determines where the color stop begins. The default value 0.5.

Note: Currently, this property is not implemented for corresponding CanvasShape and VMLShape classes which are used on Android or IE 6 - 8.

These properties are not currently implemented in CanvasShape or VMLShape.

graphic

Graphic

Reference to the container Graphic.

height

Number

Indicates the height of the shape

id

String

Unique id for class instance.

node

HTMLElement readonly

Dom node for the shape

stroke

Object

Contains information about the stroke of the shape.

color
The color of the stroke.
weight
Number that indicates the width of the stroke.
opacity
Number between 0 and 1 that indicates the opacity of the stroke. The default value is 1.
dashstyle
Indicates whether to draw a dashed stroke. When set to "none", a solid stroke is drawn. When set to an array, the first index indicates the length of the dash. The second index indicates the length of gap.
linecap
Specifies the linecap for the stroke. The following values can be specified:
butt (default)
Specifies a butt linecap.
square
Specifies a sqare linecap.
round
Specifies a round linecap.
linejoin
Specifies a linejoin for the stroke. The following values can be specified:
round (default)
Specifies that the linejoin will be round.
bevel
Specifies a bevel for the linejoin.
miter limit
An integer specifying the miter limit of a miter linejoin. If you want to specify a linejoin of miter, you simply specify the limit as opposed to having separate miter and miter limit values.

transform

String

A string containing, in order, transform operations applied to the shape instance. The transform string can contain the following values:

rotate
Rotates the shape clockwise around it transformOrigin.
translate
Specifies a 2d translation.
skew
Skews the shape around the x-axis and y-axis.
scale
Specifies a 2d scaling operation.
translateX
Translates the shape along the x-axis.
translateY
Translates the shape along the y-axis.
skewX
Skews the shape around the x-axis.
skewY
Skews the shape around the y-axis.
matrix
Specifies a 2D transformation matrix comprised of the specified six values.

Applying transforms through the transform attribute will reset the transform matrix and apply a new transform. The shape class also contains corresponding methods for each transform that will apply the transform to the current matrix. The below code illustrates how you might use the transform attribute to instantiate a recangle with a rotation of 45 degrees.

var myRect = new Y.Rect({ type:"rect", width: 50, height: 40, transform: "rotate(45)" };

The code below would apply translate and rotate to an existing shape.

 myRect.set("transform", "translate(40, 50) rotate(45)");

transformOrigin

Array

An array of x, y values which indicates the transformOrigin in which to rotate the shape. Valid values range between 0 and 1 representing a fraction of the shape's corresponding bounding box dimension. The default value is [0.5, 0.5].

visible

Boolean

Indicates whether the shape is visible.

width

Number

Indicates the width of the shape

x

Number

Indicates the x position of shape.

y

Number

Indicates the y position of shape.

AltStyle によって変換されたページ (->オリジナル) /