Konva series Tutorial 4: drawing attributes

Hello everyone , I'm brother watermelon , Let's take a look at some common attributes of graphics today .

Geometric properties

{
  x: 10,
  y: 10,
  width: 50,
  height: 50
}

x and y It represents a graphic Location , For rectangles , It's the upper left corner . For circles 、 For these , At the center of the circle .

This position is also the reference point for the deformation of the figure , Or the center of rotation .

offsetX and offsetY You can change the position of the graph .offset It actually moves the origin of the canvas coordinate system a certain distance , Then draw the graph .

For example, for Rectangles , We will offsetX and offsetY Set to width/2 and height/2, We can make the position of the rectangle go to the midpoint of the rectangle .

width and height Is the width and height of the graph . But for circular shapes , Is through the radius radius To set the size .

fill （fill）

usage ：fill: #f04

Change the graphic color ：

rect.fill('green');

fill Method can not only set the color , You can also get colors , As long as no parameters are passed in ：

const fill = rect.fill();

Of course, we can also use advanced fill images 、 Gradient function , Need to use fillPatternImage 、fillLinearGradientStartPoint 、fillLinearGradientEndPoint 、fillLinearGradientColorStops Other methods , It's a little bit too much , Let's not talk about it here .

Stroke （stroke）

There are many styles related to stroke , Only the most commonly used stroke and strokeWidth.

usage ：stroke: '#000'strokeWidth: 4

Change the stroke color of the drawing 、 Line width ：

rect.stroke('blue').strokeWidth(8);

konva Support chain writing .

Chain writing , It's actually an object , After executing the method , This object is returned again .

In this way, we can link the calls of multiple methods , Improve code readability , It is often used to modify object attribute values .

Get stroke color 、 Line width

const stroke = rect.stroke();
const strokeWidth = rect.strokeWidth();

The opacity （opacity）

usage ：opcity: 0.5

Set transparency ：

rect.opcity(0.3)

Get the value of opacity ：

const opcity = rect.opcity();

Show / hide （visible）

usage ：visible: true

The graphics ：

rect.show();
//  perhaps 
rect.visible(true);

Hide graphics ：

rect.hide();
//  or 
rect.visible(false);

The essence is to modify the graphics visible attribute , Then re render .show and hide Just semantic encapsulation .

Mouse style

We can't operate like DOM The elements are the same , Set... Directly to graphic elements cursor attribute .

But we can move the cursor over the graph , The dynamic change canvas Mounted DOM Elemental cursor attribute .

rect.addEventListener('mouseenter', () => {
  stage.container().style.cursor = 'move'
})

rect.addEventListener('mouseleave', () => {
  stage.container().style.cursor = ''
})

ending

Different shapes have their own properties , For details, see konva Documents ：

https://konvajs.org/api/Konva.html