konva实践:Konva 的一些常用api

·  阅读 41

携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第6天,点击查看活动详情

Konva Util 的一些api

haveIntersection 检查两个矩形有没有相交

入参

p1 : { x, y, width, height } p2 : { x, y, width, height }

返回值

true/false

#¥¥# 示例

import Konva from 'konva';

const overlapping = Konva.Util.haveIntersection(shape1.getClientRect(), shape2.getClientRect());

复制代码

getRandomColor 返回随机颜色值

入参

返回值

hex color

示例

import Konva from 'konva';

shape.fill(Konva.Util.getRandomColor());

复制代码

getRGB 返回RGB颜色值

入参

color: string

返回值

rgb color

示例

import Konva from 'konva';

var rgb = Konva.Util.getRGB('blue');    // return {r:0, g:0, b:255}
var rgb = Konva.Util.getRGB('#0000ff');    // return {r:0, g:0, b:255}
var rgb = Konva.Util.getRGB('rgb(0,0,255)');    // return {r:0, g:0, b:255}

复制代码

getRGB 返回RGB颜色值

入参

color: string

返回值

rgb color

示例

import Konva from 'konva';

var rgb = Konva.Util.getRGB('blue');    // return {r:0, g:0, b:255}
var rgb = Konva.Util.getRGB('#0000ff');    // return {r:0, g:0, b:255}
var rgb = Konva.Util.getRGB('rgb(0,0,255)');    // return {r:0, g:0, b:255}

复制代码

konva node

getClientRect

获取rect对应参数

入参

{
    skipTransform,   // 计算坐标时是否考虑变形参数
    skipShadow,    // 计算坐标时是否考虑阴影
    skipStroke,    // 计算坐标时是否考虑stroke
    relativeTo    // 计算相对的父元素
}
复制代码

返回值

{x, y, width, height}

示例

var rect = new Konva.Rect({
     width 100,
     height 100,
     x 50,
     y 50,
     strokeWidth 4,
     stroke 'black',
     offsetX 50,
     scaleY 2
});

// get client rect without think off transformations (position, rotation, scale, offset, etc)
rect.getClientRect({ skipTransformtrue});
// returns {
//     x : -2,   // two pixels for stroke / 2
//     y : -2,
//     width : 104, // increased by 4 for stroke
//     height : 104
//}

// get client rect with transformation applied
rect.getClientRect();
// returns Object {x: -2, y: 46, width: 104, height: 208}
复制代码

absolutePosition

获取/设置position

入参

{x,y}

返回值

{x,y}

示例

获取位置
var position = node.absolutePosition();

设置位置
node.absolutePosition({
  x: 5,
  y: 10
});
复制代码

scale(scale)

设置/获取缩放

入参

{x,y}

示例

// 获取缩放值,返回{x,y}
var scale = node.scale();

// 设置缩放值
shape.scale({
  x2,
  y3
});
复制代码

getAbsoluteScale

获取缩放值

入参

返回值

横纵缩放值 {x,y}

示例

var scaleX = node.getAbsoluteScale().x;
var scaleY = node.getAbsoluteScale().y;
复制代码

类似api

  • scaleX(x)
  • scaleY(y)

getStage

获取对应stage对象

getType

获取当前对象的类型:Stage, Layer, Group, Shape

setAttrs(config)

设置属性值

示例

node.setAttrs({
  x5,
  fill'red'
});
复制代码
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改