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 | 图片适应方式(可选) |