import{ax as i,z as a,A as n,b2 as l}from"./chunks/framework.DkLJC2NO.js";const o=JSON.parse('{"title":"uiService方法","description":"","frontmatter":{},"headers":[],"relativePath":"api/editor/uiServiceMethods.md","filePath":"api/editor/uiServiceMethods.md"}'),t={name:"api/editor/uiServiceMethods.md"};function e(h,s,p,k,r,E){return n(),a("div",null,[...s[0]||(s[0]=[l(`

uiService方法

set

js
import { uiService } from '@tmagic/editor';

// 设置缩放比例
uiService.set('zoom', 1.5);

// 设置画布尺寸
uiService.set('stageRect', { width: 375, height: 667 });

// 显示/隐藏参考线
uiService.set('showGuides', true);

// 显示/隐藏标尺
uiService.set('showRule', true);

get

js
import { uiService } from '@tmagic/editor';

const zoom = uiService.get('zoom');
console.log('当前缩放:', zoom);

const stageRect = uiService.get('stageRect');
console.log('画布尺寸:', stageRect);

zoom

js
import { uiService } from '@tmagic/editor';

// 放大0.1倍
await uiService.zoom(0.1);

// 缩小0.1倍
await uiService.zoom(-0.1);

// 当前缩放如果是1.0,执行zoom(0.5)后变为1.5
await uiService.zoom(0.5);

calcZoom

js
import { uiService } from '@tmagic/editor';

const fitZoom = await uiService.calcZoom();
console.log('适应缩放:', fitZoom);

// 应用缩放以适应
uiService.set('zoom', fitZoom);

resetState

js
import { uiService } from '@tmagic/editor';

uiService.resetState();

destroy

js
import { uiService } from '@tmagic/editor';

uiService.destroy();

use

使用中间件的方式扩展方法,上述方法中标记有扩展支持: 是的方法都支持使用use扩展

js
import { uiService } from '@tmagic/editor';

uiService.use({
  async zoom(value, next) {
    console.log('缩放前:', uiService.get('zoom'));
    await next();
    console.log('缩放后:', uiService.get('zoom'));
  },
});

usePlugin

相对于use, usePlugin支持更加灵活更加细致的扩展, 上述方法中标记有扩展支持: 是的方法都支持使用usePlugin扩展

每个支持扩展的方法都支持定制before、after两个hook来干预原有方法的行为,before可以用于修改传入参数,after可以用于修改返回的值

js
import { uiService } from '@tmagic/editor';

uiService.usePlugin({
  beforeZoom(value) {
    console.log('缩放增量:', value);
    return [value];
  },
  
  afterCalcZoom(result) {
    console.log('计算的缩放:', result);
    // 可以修改返回值
    return result;
  },
});

removeAllPlugins

删掉当前设置的所有扩展

js
import { uiService } from '@tmagic/editor';

uiService.removeAllPlugins();
`,34)])])}const g=i(t,[["render",e]]);export{o as __pageData,g as default};