视图API

危险

🚨 已知 Bug — 全局视口污染

当前版本中，setViewport()、setViewportWidth()、setViewportHeight() 的修改是 全局 的， 会影响所有图片模板的渲染输出，而非仅作用于当前模板。

例如：模板 A 调用了 setViewportWidth(400)，后续运行的模板 B 也会被强制使用 400px 宽度， 即使模板 B 从未调用过任何视口设置方法。重启渲染浏览器可暂时恢复，但再次运行修改视口的模板后问题复现。

• 🔗 GitHub Issue #40 — 设置视图宽高会影响别的图片模板
• 🏷️ 状态：待修复

设置渲染的图片大小

注意 如果同时修改高宽必须使用await等待上一步设置完成

import { isRenderering, setViewportHeight, setViewportWidth } from "easybot-image-sdk/viewport.js";
if (isRenderering()) { // 判断是否是EasyBot渲染环境,因为只有在渲染环境才有用
    await setViewportWidth(660); // 设置宽度
    await setViewportHeight(100); // 设置高度
}

完整API

/**
 * 判断当前浏览器环境是否是EasyBot渲染环境
 */
export function isRenderering(): boolean

/**
 * 获取渲染配置 (仅在EasyBot渲染时有用)
 */
export async function getViewport(): Promise<Viewport>

/**
 * 设置渲染配置 (仅在EasyBot渲染时有用)
 * @param viewport 配置
 */
export async function setViewport(viewport: Viewport)

/**
 * 设置渲染宽度 (仅在EasyBot渲染时有用)
 * 注意: 同时设置高宽时必须异步等待,否则会出错
 * @param width 渲染宽度
 */
export async function setViewportWidth(width: number)

/**
 * 设置渲染高度 (仅在EasyBot渲染时有用)
 * 注意: 同时设置高宽时必须异步等待,否则会出错
 * @param height 渲染高度
 */
export async function setViewportHeight(height: number)

export interface Viewport {
  /**
   * 渲染宽度
   */
  width: number;
  /**
   * 渲染高度
   */
  height: number;
  /**
   * 是否是移动设备
   */
  is_mobile: boolean;
  /**
   * 设备缩放因子（可以视为dpr）。默认值为1。
   */
  device_scale_factor: number;
  /**
   * 视口是否处于横向模式。默认值为 <c>false</c>。
   */
  is_landscape: boolean;
  /**
   * 视口是否具有触控事件。默认值为 <c>false</c>。
   */
  has_touch: boolean;
}