Konva

このタグの解説について

この解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。

回る男の備忘録•4年前

【Vue】vue-konvaでlabel、tag、textの組み合わせ

<v-label>内に<v-tag>、<v-text>を記述することで実現可能。実際のコード <v-label> <v-tag /> <v-text /> </v-label> これで実現可能です。参考サイト https://codesandbox.io/s9j1zp

#JavaScript#Vue#Konva

ネットで話題

38ブックマーク Konva - JavaScript Canvas 2d Library

konvajs.org

11ブックマーク Konva - Canvasで2Dを描くためのJavaScriptフレームワーク

www.moongift.jp

8ブックマーク GitHub - konvajs/konva: Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

github.com

7ブックマーク GitHub - konvajs/react-konva: React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

github.com

関連ブログ

回る男の備忘録•4年前

Konvaを利用したときのオブジェクトの重なりについて

こんなコードがあるとします。 <v-image :config="configImage"></v-image> <v-circle :config="configCircle"></v-circle> これで画像と円のオブジェクトを生成できます。画像を見ていただけるとわかると思いますが画像、円の順に重なっています。重なり順を変えたいって場合が出てくると思います。こうするのです。 <v-circle :config="configCircle"></v-circle> <v-image :config="configImage"></v-image> 上記のようにコードを書き換えた結果が…

#JavaScript#Konva#Vue#Canvas

回る男の備忘録•4年前

【Rails】既存Railsプロジェクトにvue-konvaを突っ込んだらわけわからんことになった

どうすりゃいいんだ・・・経緯 canvas導入するのにKonvaを導入したら目的の要件を満たせそうだったので導入を決意。いざ既存Railsプロジェクトに突っ込んだらエラー発生した調査中… どんなエラー？ [Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'add' of undefined" は？読み込まれてない？でもcanvasは生成されてるんだよな…konvaで設定したオブジェクトは生成されてないけど… 調査です。調査です。調査です…辛いです…

#Rails#JavaScript#Vue

回る男の備忘録•4年前

【Vue】VueとKonva.jsを組み合わせる

こうするのじゃ <v-stage ref="stage" :config="configKonva" style="border: 1px solid;"> <v-layer ref="layer"> <v-image :config="configImage"></v-image> <v-circle :config="configCircle"></v-circle> </v-layer> </v-stage> <script> export default { name: 'HelloWorld', props: { msg: String }, data() { return { co…

#HTML#JavaScript#Canvas#Vue#Konva

回る男の備忘録•4年前

【HTML】Canvasを使用するのに良さそうなライブラリを探したい

候補 Fabric.js const canvas = new fabric.Canvas('canvas'); canvas.add( new fabric.Rect({ width: 100, height: 200, left: 100, top: 100, fill: 'red' }) ); こうするとオブジェクトをドラッグして移動できる。 Konva.js const box = new Konva.Rect({ x: 50, y: 50, width: 100, height: 100, fill: "#4169e1", // 塗りつぶし stroke: "#000", // 枠線…

#Canvas#HTML#JavaScript#Konva