Class: Label

Konva. Label

Label constructor.  Labels are groups that contain a Text and Tag shape


new Label(config)

Parameters:
Name Type Description
config Object
Properties
Name Type Argument 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:
konva.js
Example
// create label
var label = new Konva.Label({
  x: 100,
  y: 100,
  draggable: true
});

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

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

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:
konva.js

getText()

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

Source:
konva.js
Example
label.getText().fill('red')