エントリーの編集
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
React+Canvasで画像コントロール - Qiita
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
React+Canvasで画像コントロール - Qiita
はじめに 以前に投稿したCSSで写真コントロールUIを作るをさらに改良して、 画像をズームしたり、マウス... はじめに 以前に投稿したCSSで写真コントロールUIを作るをさらに改良して、 画像をズームしたり、マウスドラッグで動かしたりできて、さらに画像のピクセル座標を取得するUIを作成した。 前回はreact/reduxのスタイル制御で実装したが、 今回はマウスでクリックした位置にピンを立てたりといった、 より複雑な画像コントロールを実現するため、 canvas内包のreactライブラリであるreact-konvaを使ってみた。 react-konvaを使うメリット 普通にcanvasを使うより断然簡単! これは他のCanvas内包ライブラリも同じかもしれないが、 画像操作の実装が格段にしやすくなった。 前回の投稿のようにスタイルを操作する時の苦労から解放された。 画像のズームやドラッグをする際は、width, height, 画像の位置を示すx, yを操作すればいい。 これらのパラメータをsta

