携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
介绍
一个超级好用的前端 konva的画布层级： 根节点是一个Stage元素 Stage下面有许多Layer（根据Layer顺序显示） Layer下面可以放Group（可选） Layer/Group下绘制我们的图形等
安装下载
npm install react-konva konva
引用示例
import { Stage, Layer, Rect, Circle } from 'react-konva';
<Stage width={window.innerWidth} height={window.innerHeight}>
<Layer>
<Rect width={50} height={50} fill="red" />
<Circle x={200} y={200} stroke="black" radius={50} />
</Layer>
</Stage>
Stage
常用属性
- x
- y 坐标
- width
- height 宽高
- visible 是否可见
- opacity 透明度
- scale 压缩
- rotation 旋转
- draggable 是否可拖拽
常用事件
- getPointerPosition 获取坐标位置
- getTransForm()
- move(change)
Layer
常用属性
- x
- y 坐标
- width
- height 宽高
- visible 是否可见
- opacity 透明度
- scale 压缩
- rotation 旋转
- draggable 是否可拖拽
基础图形
konva 中内置了很多形状的元素，比如圆形、矩形等。
矩形
<Rect
x={20}
y={50}
width={100}
height={100}
fill="red"
shadowBlur={10}
/>
常用属性
- fill
- stroke
- x 坐标
- y 坐标
- height 高度
- width 宽
- draggable 是否可拖拽
线条
<Line
x={20}
y={200}
points={[0, 0, 100, 0, 100, 100]}
tension={0.5}
closed
stroke="black"
fillLinearGradientStartPoint={{ x: -50, y: -50 }}
fillLinearGradientEndPoint={{ x: 50, y: 50 }}
fillLinearGradientColorStops={[0, 'red', 1, 'yellow']}
/>
常用属性
- points 坐标: [x1,y1,x2,y2,x3,y3]
- fill 线条颜色
- closed 线条是否闭合
- opacity 透明度
- draggable 是否可拖拽
圆形
<Circle x={200} y={100} radius={50} fill="green" />
常用属性
- radius 圆心
- fill
- stroke
- x
- y
图片
<Image
x={this.props.x}
y={this.props.y}
image={this.state.image}
ref={(node) => {
this.imageNode = node;
}}
/>
常用属性
- image 图片路径
- x
- y
- fill
- stroke
自定义形状
<Shape
sceneFunc={(context, shape) => {
context.beginPath();
context.moveTo(20, 50);
context.lineTo(220, 80);
context.quadraticCurveTo(150, 100, 260, 170);
context.closePath();
// (!) Konva specific method, it is very important
context.fillStrokeShape(shape);
}}
fill="#00D2FF"
stroke="black"
strokeWidth={4}
/>
基本监听事件
Mousee vents:
mouseover, mouseout, mouseenter, mouseleave, mousemove, mousedown, mouseup, wheel, click, dblclick.
Touch events:
touchstart, touchmove, touchend, tap, dbltap.
Pointer events:
pointerdown, pointermove, pointereup, pointercancel, pointerover, pointerenter, pointerout,pointerleave, pointerclick, pointerdblclick.
Drag events:
dragstart, dragmove, and dragend.
Transform events:
transformstart, transform, transformend.
