安装

发表于

更新于

阅读量

npm i tweakpane

// 用于TypeScript额外定义
npm i --save-dev @tweakpane/core

使用

发表于

更新于

阅读量

import {Pane} from 'tweakpane'

const pane = new Pane()

InputBindings

使用addInput()来修改参数的值

const PARAMS = {
  factor: 123,
  title: 'hello',
  color: '#ff0055',
};

const pane = new Pane();

pane.addInput(PARAMS, 'factor');
pane.addInput(PARAMS, 'title');
pane.addInput(PARAMS, 'color');

一些其他类型的参数需要额外的参数

const PARAMS = {
  percentage: 50,
  theme: 'dark',
};

// `min` and `max`: slider
pane.addInput(
  PARAMS, 'percentage',
  {min: 0, max: 100, step: 10}
);

// `options`: list
pane.addInput(
  PARAMS, 'theme',
  {options: {Dark: 'dark', Light: 'light'}}
);

Folders

使用addFolder()来组织

const f = pane.addFolder({
    title:'Title',
    expanded: true
})

f.addInput(Params,'text')
f.addInput(Params,'size')

如果想要展开/缩放整个面板，设置title属性

const pane = new Pane({
  title: 'Parameters',
  expanded: true,
});

Events

使用on()来处理改变事件

const input = pane.addInput(
  PARAMS, 'size',
  {min: 8, max: 100, step: 1}
);

input.on('change', function(ev) {
  console.log(`change: ${ev.value}`);
});

Presets

使用exportPresets以JSON形式到处当前绑定值

btn.on('click', function() {
  const preset = pane.exportPreset();
  console.log(preset);
});

Monitor bindings

使用addMonitor()来监听值变化

pane.addMonitor(sketch, 'signal', {
  view: 'graph',
  interval: 200,
  min: -1,
  max: +1,
});

主要方法

发表于

更新于

阅读量

• children
• disabled
• document
• element
• expanded
• hidden
• title
• add
• addBlade
• addButton
• addFolder
• addInput
• addMonitor
• addSeperator
• addTab
• dispose
• exportPreset
• importPreset
• on
• refresh
• registerPlugin
• remove

API文档

发表于

更新于

阅读量

Tweakpane (cocopon.github.io)