Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bcrikko/xypadjs
:control_knobs: XYPad controller component using Canvas API
https://github.com/bcrikko/xypadjs
canvas javascript typescript xypad
Last synced: 2 months ago
JSON representation
:control_knobs: XYPad controller component using Canvas API
- Host: GitHub
- URL: https://github.com/bcrikko/xypadjs
- Owner: BcRikko
- License: mit
- Created: 2019-08-29T01:58:04.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T09:10:58.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T14:45:42.451Z (8 months ago)
- Topics: canvas, javascript, typescript, xypad
- Language: TypeScript
- Homepage: https://twitter.com/bc_rikko/status/1167363302327869442
- Size: 854 KB
- Stars: 11
- Watchers: 2
- Forks: 2
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# :control_knobs: XYPad.js
XYPad.js is XYPad controller component using Canvas API.
XYPad.jsはCanvasAPIを使った2次元パッドコントローラのコンポーネントです。
## :books: Examples
## :rocket: Getting started
```html
```
```js
new XYPad({
// Specifies the selector of the parent element. XYPad creates a Canvas element within parent element.
// 親要素のセレクターを指定します。XYPadは親要素の中にCanvas要素を作成します。
el: '#app',
// (Option)Specifies the color of the current position pointer. The default color is `black `.
// (省略可能)現在位置を示すポインターの色を指定します。デフォルトは`black`です。
pointerColor: '#23CBF5',
// (Option)Specifies the size of the Canvas elements to display. The default is 300px x 300px.
// (省略可能)表示するCanvas要素のサイズを指定します。デフォルトは300x300です。
width: 300,
height: 300,
// (Option)Specifies the maximum and minimum values that XYPad can take in two dimensions. The default is `xRange: {min: -100, max: 100}` `yRange: {min: -100, max: 100}`.
// (省略可能)XYPadが取りうる2次元上の最大値と最小値を指定します。デフォルトは`xRange: {min: -100, max: 100}` `yRange: {min: -100, max: 100}`です。
xRange: { min: -100, max: 100 },
yRange: { min: -100, max: 100 },
// (Option)Callback for pointer drag event. The argument value is a Pointer class.
// (省略可能)ポインターのドラッグイベントのコールバックです。引数はPointerクラスです。
callback: (pointer) => {
document.querySelector('#output').innerHTML = pointer.toString()
// current point
const { x, y } = p.point
// { x: 50, y: 30 }
console.log(p.toString())
})
// (Option)Callback to start dragging. The argument value is a Pointer class.
// (省略可能)ドラッグを開始したときのコールバックです。引数はPointerクラスです。
onDragStart: (pointer) => {
console.log('drag start:', p.toString())
}
// (Option)Callback while dragging. The argument value is a Pointer class.
// (省略可能)ドラッグ中のコールバックです。引数はPointerクラスです。
onDragMove: (pointer) => {
console.log('drag move:', p.toString())
}
// (Option)Callback when finished dragging. The argument value is a Pointer class.
// (省略可能)ドラッグを終了したときのコールバックです。引数はPointerクラスです。
onDragEnd: (pointer) => {
console.log('drag end:', p.toString())
}
})
```
## :book: API
### destroy
```ts
xyPad.destroy()
```
Removes XYPad drag events.
XYPadのドラッグイベントを削除します。
### getPointer
```ts
const p = xyPad.getPointer()
const { x, y } = p.point
```
Gets the value of the current pointer.
現在のポインターの値を取得します。
### movePointerTo
```ts
const newPoint = new Pointer(10, 20)
xyPad.movePointerTo(newPoint)
// or
xyPad.movePointerTo(10, 20)
```
Sets the value of the current pointer.
ポインターの値を設定します。
## :copyright: Copyright and license
Code and documentation copyright 2019 [B.C.Rikko](https://github.com/BcRikko). Code released under the MIT License. Docs released under Creative Commons.