leaferjs元素的基本使用

序言

别因今天的懒惰，让明天的您后悔。输出文章的本意并不是为了得到赞美，而是为了让自己能够学会总结思考；当然，如果有幸能够给到你一点点灵感或者思考，那么我这篇文章的意义将无限放大。

背景

前篇文章我们介绍了leaferjs，那么这篇文章我们就来介绍一下leaferjs大致的元素和用法；这篇文章大致介绍一下以下几个元素的使用：

• 矩形 - Rect
• 圆形 - Ellipse
• 横线 - Line
• 三角形 - Polygon
• 五角星 - Star
• 文本 - Text

今天的我们就来先学习哈，这些最基础的功能，我也会发布到仓库里面大家参考学习仓库地址

Rect

rect可以创建一个矩形，也可以根据自己的需要设置宽高以及颜色（fill）和是否拖动（editable）

示例1：

const rect = new Rect({
  width: 100,
  height: 100,
  fill: 'rgb(50,205,121)',
  editable: true,
});

如果我们想给矩形设置圆角也可以通过属性cornerRadius进行设置；当然我们也可以设置不同角度的圆角，就像css设置border-radius一样。

示例2：更多的属性可以参考文档中进行设置即可。

const rect = new Rect({
    width: 100,
    height: 100,
    fill: 'rgb(50,205,121)',
    cornerRadius: [0, 40, 20, 40]
})

Ellipse

Ellipse主要是用来创建圆形，也可以设置宽高等属性；

示例1：

const ellipse = new Ellipse({
  width: 100,
  height: 100,
  fill: 'rgb(50,205,121)',
});

以上示例只是最简单的圆形元素，圆形可操作型是相当强的，比如环形等等都是可以做的

在css中我们画一个环形是这样做的：

width: 45px;
height: 45px;
border-radius: 50%;
border: 10px solid rgb(50, 205, 121);

但是在leaferjs中就简单的多了，只需要增加innerRadius: 0.5, 属性即可。

示例2：

const ellipse = new Ellipse({
  width: 100,
  height: 100,
  innerRadius: 0.5,
  fill: 'rgb(50,205,121)',
});

Line

横线也是可以玩出花来，我觉得leaferjs真的挺有意思的，花里胡哨的（我喜欢，哈哈哈）

示例1：这个是很简单的示例。

const line = new Line({
    width: 100,
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

示例2：通过points可以进行设置各种曲线，包括曲线图也是可以的，相对有意思。

const line = new Line({
    points: [10, 90, 10, 10, 50, 70, 90, 10, 90, 90], 
    curve: true,
    strokeWidth: 5,
    stroke: 'rgb(50,205,121)'
})

Polygon

sides 属性表示多少菱角，cornerRadius 属性表示圆角。

示例1：

const polygon = new Polygon({
    width: 100,
    height: 100,
    sides: 3,
    fill: 'rgb(50,205,121)'
})

示例2：

const polygon = new Polygon({
    width: 100,
    height: 100,
    sides: 6,
    cornerRadius: 10,
    fill: 'rgb(50,205,121)'
})

Text

示例1：基本文本

const text = new Text({
    fill: 'rgb(50,205,121)',
    text: 'Welcome to LeaferJS',
})

示例2：超出文本省略

const text = new Text({
  fill: 'rgb(50,205,121)',
  text: 'Welcome to LeaferJS',
  textOverflow: 'hide',
  fontSize: 40,
  width: 200,
});
text.textOverflow = '...';
workspace.value.add(text);

示例3：首字母大写

const text = new Text({
  fill: 'rgb(50,205,121)',
  text: 'welcome to LeaferJS',
  textOverflow: 'hide',
  fontSize: 40,
  width: 200,
  textCase: 'title',
});
text.textOverflow = '...';
workspace.value.add(text);

总结

以上就是leaferjs元素的基本用法，当然还有很多元素没有写出来，属性同样是的；大家在学习使用的时候可以多看看文档，今天的基本学习就到这儿了；后面有遇到问题以及一些dom的学习上再给大家分享。