xinglie / report-designer

⚡打印设计、可视化、标签打印、编辑器、设计器、数据分析、报表设计、组件化、表单设计、h5页面、调查问卷、pdf生成、流程图、试卷、SVG、图形元素、物联网、标签纸
https://xinglie.github.io/report-designer/
902 stars 232 forks source link

SVG形状元素 #22

Open xinglie opened 3 years ago

xinglie commented 3 years ago

椭圆相关

弧是椭圆的一部分

以椭圆为基础的形状元素目前有“弧”和"圆饼"两个 在设计区添加"弧"后,显示如下 image 可以通过拖动中间虚线圆上的两个角度控制点改变弧的起始和结束角度。 可以通过拖动右侧和底部的两个控制点改变弧的长轴与短轴

当起始角度和结束角度重合时,界面将不显示任何弧,如果需要显示一个完整的椭圆,请直接使用SVG中的椭圆元素

修改点

部分复杂的元素,如“圆柱”、"立方体"、”五角星“、”箭头“等,则支持调整元素上的修改点来改变元素的默认形状

image

拖动元素上的方形修改点,则可以修改元素的默认形状,不同元素的修改点的位置,可修改范围,及可修改方向均根据元素的不同而不同。有些元素的修改点不止一个,如”拐角“元素

image

则有3个修改点

控制点

有些元素由点组成,如”多边形“和”五角星“

image

这些元素可以删除控制点和添加控制点,用来组织想要的形状

控制点之前目前仅支持直线连结

控制点,修改点与属性面板联动

当鼠标在编辑区的元素上点击”控制点“或”修改点“时,相应的空心圆或空心矩形会变成实心,同时右侧的属性面板中,对应点前的标题会带有淡主题色的背景,如下图 image

同样,在右侧属性面板中,当鼠标悬浮在相应”控制点“或”修改点“的标题时,编辑区中相应的”控制点“或”修改点“会变成实心的,告诉用户是哪个点