[]
        
在线Demo 免费试用
(Showing Draft Content)

直线,贝塞尔曲线和折线

功能概述

线条包括直线,贝塞尔曲线和折线三种。

image

1. 添加形状

在左侧的工具栏上,选择直线,贝塞尔曲线,或者折线,直接拖到设计器上。

2. 基本设定

直线和折线都包含了丰富的设置属性来控制图形外观,如下:

属性

描述

边框颜色

直线以及折线的绘制颜色

边框宽度

直线以及折线的线条宽度

边框线型

直线以及折线的线型,支持实线和虚线

虚线间隔

线型为虚线时,定义间隔的大小

image

显示阴影

是否显示阴影

不透明度

设定图形的不透明度

起点箭头

是否显示起点箭头

image

终点箭头

是否显示终点箭头

image

圆角半径

折线转弯处的圆角半径设定

image

3. 形状调整

3.1 编辑态和非编辑态

在设计器中直线,贝塞尔曲线和折线有两种状态,编辑态和非编辑态,在编辑态中可以灵活地调整线条的位置,形状,增加或者删除折线的子线条等等操作。

状态

进入或者退出方式

功能

示例


非编辑态

组件的默认状态

呈现组件

image


编辑态

进入方式:

  • 双击组件

  • 点击组件上方的编辑按钮

退出方式:

  • 按下 ESC 或者回车键

  • 点击画面空白处

  • 移动端点调整线条

  • 移动控制点增加线条

image

image

image


3.2 直线编辑

直线在编辑状态包含2个控制点,这2个控制点来决定曲线的形状。

双击直线进入编辑状态,移动端点到指定位置,编辑完成后,点击空白区域,或者按下 ESC,Enter键退出编辑。

image

3.3 贝塞尔曲线编辑

贝塞尔曲线在编辑状态包含4个控制点,这四个控制点来决定曲线的形状。

双击直线进入编辑状态,移动端点到指定位置,编辑完成后,点击空白区域,或者按下 ESC,Enter键退出编辑。

image

3.4 折线编辑

折线相对于直线来说,具有更多的控制点来控制折线的形状,下面介绍如何增加控制点以及删除控制点。

增加子线段,双击中间的控制点,会多出一个子线段,如右侧:

功能

操作

结果

增加子线段

image

image

删除子线段

image

image

对齐端点

竖直方向对齐端点 A 和 B

image

按下 Ctrl 键,鼠标移动A向左,当与B竖直对齐的时候,

会自动吸附,并且B点的圆圈变为实心。

image

4. 动画效果

基础形状支持了多种内置动画,包括闪烁,发光,流动,呼吸。

动画

示例

闪烁

shanshuo

发光

faguang

流动

liudng

轨迹

guiji

5. 数据绑定

直线和折线的数据绑定上没有分类,只有单值的绑定,用户可以绑定很多个单值到组件上,来显示数据或者用户条件格式化。

选择目标数据集或者数据模型,直接拖拽字段到组件绑定区域,然后设定聚合方法。

image

6. 条件格式化

条件格式化的字段来自于数据绑定:

image

数字类型和文本类型的字段具有不同的比较方法,与基础图表一致。

基础图形的条件格式化支持的样式属性包含三部分:基础样式,动画效果。

样式

描述

基础样式

image

动画效果

image