Skip to Content
ClassesFOverGridImageBuilder

类: FOverGridImageBuilder

方法

buildAsync()

buildAsync(): Promise<ISheetImage>;

返回

Promise<ISheetImage>


getSource()

getSource(): string;

Get the source of the image

返回

string

The source of the image

示例

const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const images = fWorksheet.getImages(); images.forEach((image) => { console.log(image, image.toBuilder().getSource()); });

getSourceType()

getSourceType(): ImageSourceType;

Get the source type of the image

返回

ImageSourceType

The source type of the image

示例

const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const images = fWorksheet.getImages(); images.forEach((image) => { console.log(image, image.toBuilder().getSourceType()); });

setAnchorType()

setAnchorType(anchorType): FOverGridImageBuilder;

Set the anchor type of the image, whether the position and size change with the cell

参数

参数类型描述
anchorTypeSheetDrawingAnchorTypeThe anchor type of the image

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); // image1 position is start from A6 cell, anchor type is Position. // Only the position of the drawing follows the cell changes. When rows or columns are inserted or deleted, the position of the drawing changes, but the size remains the same. const image1 = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(0) .setRow(5) .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Position) .buildAsync(); // image2 position is start from C6 cell, anchor type is Both. // The size and position of the drawing follow the cell changes. When rows or columns are inserted or deleted, the size and position of the drawing change accordingly. const image2 = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(2) .setRow(5) .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.Both) .buildAsync(); // image3 position is start from E6 cell, anchor type is None. // The size and position of the drawing do not follow the cell changes. When rows or columns are inserted or deleted, the position and size of the drawing remain unchanged. const image3 = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(4) .setRow(5) .setAnchorType(univerAPI.Enum.SheetDrawingAnchorType.None) .buildAsync(); // insert images into the sheet fWorksheet.insertImages([image1, image2, image3]); // after 2 seconds, set the row height of the 5th row to 100px and insert a row before the 5th row. // then observe the position and size changes of the images. setTimeout(() => { fWorksheet.setRowHeight(5, 100).insertRowBefore(5); }, 2000);

setColumn()

setColumn(column): FOverGridImageBuilder;

Set the horizontal position of the image

参数

参数类型描述
columnnumberThe column index of the image start position, start at 0

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .buildAsync(); fWorksheet.insertImages([image]);

setColumnOffset()

setColumnOffset(offset): FOverGridImageBuilder;

Set the horizontal offset of the image

参数

参数类型描述
offsetnumberThe column offset of the image start position, pixel unit

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and horizontal offset is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setColumnOffset(10) .buildAsync(); fWorksheet.insertImages([image]);

setCropBottom()

setCropBottom(bottom): FOverGridImageBuilder;

Set the cropping region of the image by defining the bottom edges, thereby displaying the specific part of the image you want.

参数

参数类型描述
bottomnumberThe number of pixels to crop from the bottom of the image

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, bottom crop is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setCropBottom(10) .buildAsync(); fWorksheet.insertImages([image]);

setCropLeft()

setCropLeft(left): FOverGridImageBuilder;

Set the cropping region of the image by defining the left edges, thereby displaying the specific part of the image you want.

参数

参数类型描述
leftnumberThe number of pixels to crop from the left side of the image

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, left crop is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setCropLeft(10) .buildAsync(); fWorksheet.insertImages([image]);

setCropRight()

setCropRight(right): FOverGridImageBuilder;

Set the cropping region of the image by defining the right edges, thereby displaying the specific part of the image you want.

参数

参数类型描述
rightnumberThe number of pixels to crop from the right side of the image

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, right crop is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setCropRight(10) .buildAsync(); fWorksheet.insertImages([image]);

setCropTop()

setCropTop(top): FOverGridImageBuilder;

Set the cropping region of the image by defining the top edges, thereby displaying the specific part of the image you want.

参数

参数类型描述
topnumberThe number of pixels to crop from the top of the image

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, top crop is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setCropTop(10) .buildAsync(); fWorksheet.insertImages([image]);

setHeight()

setHeight(height): FOverGridImageBuilder;

Set the height of the image

参数

参数类型描述
heightnumberThe height of the image, pixel unit

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setWidth(120) .setHeight(50) .buildAsync(); fWorksheet.insertImages([image]);

setImage()

setImage(image): FOverGridImageBuilder;

Set the initial image configuration for the image builder.

参数

参数类型描述
imageISheetImageThe image configuration

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set initial image configuration. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setImage({ drawingId: '123456', drawingType: univerAPI.Enum.DrawingType.DRAWING_IMAGE, imageSourceType: univerAPI.Enum.ImageSourceType.BASE64, source: 'https://avatars.githubusercontent.com/u/61444807?s=48&v=4', unitId: fWorkbook.getId(), subUnitId: fWorksheet.getSheetId(), }) .setColumn(5) .setRow(5) .buildAsync(); fWorksheet.insertImages([image]);

setRotate()

setRotate(angle): FOverGridImageBuilder;

Set the rotation angle of the image

参数

参数类型描述
anglenumberDegree of rotation of the image, for example, 90, 180, 270, etc.

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, rotate 90 degrees. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setRotate(90) .buildAsync(); fWorksheet.insertImages([image]);

setRow()

setRow(row): FOverGridImageBuilder;

Set the vertical position of the image

参数

参数类型描述
rownumberThe row index of the image start position, start at 0

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .buildAsync(); fWorksheet.insertImages([image]);

setRowOffset()

setRowOffset(offset): FOverGridImageBuilder;

Set the vertical offset of the image

参数

参数类型描述
offsetnumberThe row offset of the image start position, pixel unit

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell and vertical offset is 10px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setRowOffset(10) .buildAsync(); fWorksheet.insertImages([image]);

setSource()

调用签名

setSource(source): FOverGridImageBuilder;

Set the source of the image.

参数
参数类型描述
sourcestringThe source of the image
返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例
// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .buildAsync(); fWorksheet.insertImages([image]);

调用签名

setSource(source, sourceType?): FOverGridImageBuilder;

Set the source of the image.

参数
参数类型描述
sourcestringThe source of the image
sourceType?ImageSourceTypeThe source type of the image, default is URL
返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例
// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .buildAsync(); fWorksheet.insertImages([image]);

setSubUnitId()

setSubUnitId(subUnitId): FOverGridImageBuilder;

参数

参数类型
subUnitIdstring

返回

FOverGridImageBuilder


setUnitId()

setUnitId(unitId): FOverGridImageBuilder;

参数

参数类型
unitIdstring

返回

FOverGridImageBuilder


setWidth()

setWidth(width): FOverGridImageBuilder;

Set the width of the image

参数

参数类型描述
widthnumberThe width of the image, pixel unit

返回

FOverGridImageBuilder

The FOverGridImageBuilder for chaining

示例

// create a new image builder and set image source. // then build `ISheetImage` and insert it into the sheet, position is start from F6 cell, width is 120px and height is 50px. const fWorkbook = univerAPI.getActiveWorkbook(); const fWorksheet = fWorkbook.getActiveSheet(); const image = await fWorksheet.newOverGridImage() .setSource('https://avatars.githubusercontent.com/u/61444807?s=48&v=4', univerAPI.Enum.ImageSourceType.URL) .setColumn(5) .setRow(5) .setWidth(120) .setHeight(50) .buildAsync(); fWorksheet.insertImages([image]);