Class: Label

Kinetic. Label

Constructor

new Label(config)

Label constructor.  Labels are groups that contain a Text and Tag shape
Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
x Number <optional>
y Number <optional>
width Number <optional>
height Number <optional>
visible Boolean <optional>
listening Boolean <optional>
whether or not the node is listening for events
id String <optional>
unique id
name String <optional>
non-unique name
opacity Number <optional>
determines node opacity. Can be any number between 0 and 1
scale Object <optional>
set scale
scaleX Number <optional>
set scale x
scaleY Number <optional>
set scale y
rotation Number <optional>
rotation in degrees
offset Object <optional>
offset from center point and rotation point
offsetX Number <optional>
set offset x
offsetY Number <optional>
set offset y
draggable Boolean <optional>
makes the node draggable. When stages are draggable, you can drag and drop the entire stage by dragging any portion of the stage
dragDistance Number <optional>
dragBoundFunc function <optional>
Source:
Example
// create label
var label = new Kinetic.Label({<br>
  x: 100,<br>
  y: 100, <br>
  draggable: true<br>
});<br><br>

// add a tag to the label<br>
label.add(new Kinetic.Tag({<br>
  fill: '#bbb',<br>
  stroke: '#333',<br>
  shadowColor: 'black',<br>
  shadowBlur: 10,<br>
  shadowOffset: [10, 10],<br>
  shadowOpacity: 0.2,<br>
  lineJoin: 'round',<br>
  pointerDirection: 'up',<br>
  pointerWidth: 20,<br>
  pointerHeight: 20,<br>
  cornerRadius: 5<br>
}));<br><br>

// add text to the label<br>
label.add(new Kinetic.Text({<br>
  text: 'Hello World!',<br>
  fontSize: 50,<br>
  lineHeight: 1.2,<br>
  padding: 10,<br>
  fill: 'green'<br>
 }));

Methods

getTag()

get Tag shape for the label. You need to access the Tag shape in order to update the pointer properties and the corner radius
Source:

getText()

get Text shape for the label. You need to access the Text shape in order to update the text properties
Source: