XImage class

XImageGesti中图片的"元数据",它在被创建后一般不会改变大小,因为它只能作为图片"元数据"被渲染,并不能像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(属性)

属性类型描述
dataany图片数据
widthnumber图片宽度
heightnumber图片高度
urlstring图片链接
fitBoxFit适应方式

XImageOption

属性类型描述
dataany图片数据源
originDataany图片原始数据
widthnumber图片宽度
heightnumber图片高度
scalenumber图片缩放倍数
maxScalenumber最大放大倍数
minScalenumber最小缩小倍数
fixedWidthnumber图片原始宽度
fixedHeightnumber图片原始高度
urlstring图片网络地址
fitBoxFit图片适应方式(可选)