XImage class
XImage是Gesti中图片的"元数据",它在被创建后一般不会改变大小,因为它只能作为图片"元数据"被渲染,并不能像ViewObject一样被操作缩放比例和大小,
如果你像改变一张图片的大小或者缩放比例,不妨把它作为背景图片使用在Rectangle内或者与ImageBox一同使用。
总而言之,XImage不能被改变位置、缩放比例、大小等,它在被创建后是不可更改的,如需进行图片操作需要让它和组件对象结合使用,详细使用方法请参考Example。
Example
const image = new Image();
//将路径替换为你的图片路径
image.src = "./logo.png";
image.onload = () => {
const xImage = new XImage({
data: image,
width: image.width,
height: image.height,
fit: BoxFit.fitHeight,
});
const imageBox = new ImageBox(xImage);
imageBox.installButton(new DragButton());
imageBox.installMultipleButtons([
new MirrorButton(),
new CloseButton(),
new RotateButton({
alignment: Alignment.topLeft,
}),
]);
controller.load(imageBox);
controller.center(imageBox);
controller.layerBottom(imageBox);
};
出现错误:"Invalid value of XImage option,data, width, and height must all be non-null"。 原因:请保证图片数据被正常加载,XImage一般在图片onload回调函数内被创建。
请注意:确保您使用的图片源可以正常被 Canvas 渲染
Properties(属性)
| 属性 | 类型 | 描述 |
|---|---|---|
| data | any | 图片数据 |
| width | number | 图片宽度 |
| height | number | 图片高度 |
| url | string | 图片链接 |
| fit | BoxFit | 适应方式 |
XImageOption
| 属性 | 类型 | 描述 |
|---|---|---|
| data | any | 图片数据源 |
| originData | any | 图片原始数据 |
| width | number | 图片宽度 |
| height | number | 图片高度 |
| scale | number | 图片缩放倍数 |
| maxScale | number | 最大放大倍数 |
| minScale | number | 最小缩小倍数 |
| fixedWidth | number | 图片原始宽度 |
| fixedHeight | number | 图片原始高度 |
| url | string | 图片网络地址 |
| fit | BoxFit | 图片适应方式(可选) |