今まで触る機会がなかったのですが、初めてcanvasを使ってみたので記事にしてみます。
canvasは色々できるイメージありますよね。余り使わないかもですが、お絵描きのようなこともできますし、FigmaとかMiroのような便利なサービスで使われています。
FigmaやCADのようなGUIサービスだと、オブジェクトの位置を調整するためにスナップを利かせたいというときがあると思います。
今回はreact-konvaというライブリを使ってやってみています。
https://konvajs.org/docs/react/Intro.html
onDragEndが発火するタイミングで、端数を四捨五入する。
onDragEndの引数のeventは、event.targetはx()やy()のような関数を持っています。
この関数は引数を値を入れた場合と入れない場合で異なる挙動をします。
例えばドラッグの終了位置が、{x: 333, y: 222}という座標に落ちた場合とします。
event.target.x(100)のように数値を入れるとオブジェクトの座標が{x: 100, y: 222}と設定されます。
一方、event.target.x()のように空の場合だと、返り値として333が返ってきて、座標は更新されません。
この性質を使って、スナップを効かせることができます。
const positionUnitValue = 100
onDragEnd={e => {
const newX = Math.round(e.target.x() / positionUnitValue) * positionUnitValue
const newY = Math.round(e.target.y() / positionUnitValue) * positionUnitValue
e.target.x(newX)
e.target.y(newY)
});
}}
見ての通りで特に難しいことをやっているわけではありません。
基準となる数を設定して、割り算して余りを除いてあげているだけです。
ちなみに、onDragMoveでも同様に書くことで、常時スナップを効かせることができます。ただ、その場合、ドラッグして移動中に毎回処理が走るので、その点パフォーマンスを考慮しておく必要ありそうですね。
canvasを触ってみた感想は、コードが難しいというよりも、どうやったら理想に近づくのかというのを組み立てる点だと感じました。デザイナーがいる場合は、Figmaでモックを作っていただくということもあるかもしれません。ただ、ある程度使えるようになると、やれることと実装の想像ができるようになるので、自分で作ってどんどん作っていった方が手っ取り早いかもしれません。