【SpreadJS v16.0 新特性预览】更智能的形状大小调节功能增强

收藏

本帖最后由爱迪生于 2022-11-16 16:26 编辑

SpreadJSV 16.0支持形状允许调整大小增强

实现允许调整大小:全部|水平|垂直|方向|无

选中表现
image.png789993591.png

调整行为大小
允许调整大小(“方向”)
使用[NW、NE、SW、SE]处理程序调整形状大小时，形状的纵横比将保持不变。
当使用[N，S，W，E]处理程序调整形状大小时，形状的纵横比将改变。
16e43492-e937-476d-8eb6-36276504d74d.gif477748412.png

19425d7a-e232-4743-9c54-8a390541bed2.gif603975829.png

允许调整大小(“水平”)
只有[W，E]两个控制器，只能更改形状的宽度。

071bd48e-fab3-46a8-8833-a875e2f75741.gif130758971.png

47d540c7-4278-44dd-9214-af175280b8b8.gif102933348.png

允许调整大小(“垂直”)
只有[N，S]两个控制器，只能更改形状的宽度。

502c8195-9369-4590-88fa-15d702062357.gif540106811.png

6c627549-a22b-45f4-879b-1c1a405c41c5.gif512281188.png

允许调整大小(是)
b1569e43-2176-4305-beb5-2eb449032fe9.gif47886351.png

95f01952-12dc-4977-8b5b-c0a19e5a71bf.gif207317198.png

允许调整大小(否)
不会显示所有调整大小控制器

d94a9da7-8ee4-4112-b50d-dcddcf7bc232.gif252363890.png

8d022caa-bd44-4e34-ae11-3bef44c97715.gif64895934.png

调整连接线形状的行为
在[方向，水平，垂直，是]调整大小模式下，当鼠标移动到连接点时，它将直接连接到连接点。

9b2a8e22-80fb-40be-9d1c-d7c89c3f49cb.gif718662109.png

API

export class ShapeBase {
allowResize(value?: ResizeMode | boolean): ResizeMode | boolean
// ... other api
}
export enum ResizeMode {
/**
* 显示所有调整大小控制器，当使用[NW，NE，SW，SE]处理程序调整形状大小时，形状的纵横比将保持不变。
*/
aspect = 0,
/**
* 仅显示[W，E]调整大小控制器，该处理程序只能在调整形状大小时更改形状的宽度。
*/
horizontal = 1,
/**
* 仅显示[N，S]调整大小控制器，该处理程序只能在调整形状大小时更改形状的高度。
*/
vertical = 2
}

复制代码

支持的形状类型和默认值

形状类型	默认值
相机尺寸	方向
连接器	是
表单控件	是
组合图形	是
图片形状	方向
形状	是

注意：允许调整大小属性只影响UI行为，形状的宽高API不受影响。
在线表格编辑器与之前版本的不同：
image.png31450804.png

		自动登录	找回密码
密码			立即注册

【SpreadJS v16.0 新特性预览】更智能的形状大小调节功能增强

0 个回复