react-konva实践 --- 实现绘制canvas基础图像

·  阅读 51

携手创作,共同成长!这是我参与「掘金日新计划 · 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:

mouseovermouseoutmouseentermouseleavemousemovemousedownmouseupwheelclickdblclick.

Touch events:

touchstarttouchmovetouchendtapdbltap.

Pointer events:

pointerdownpointermovepointereuppointercancelpointeroverpointerenterpointerout,pointerleavepointerclickpointerdblclick.

Drag events:

dragstartdragmove, and dragend.

Transform events:

transformstarttransformtransformend.

资料分享

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改