タグ

ブックマーク / hashrock.hatenablog.com (2)

  • Vue.js + SVG練習8 : 付箋を作った&vuexに入門した - No Regrets in Bathing

    ふつーのドラッグ出来たりリサイズ出来たりする付箋。 SVGで作る必要があったのかは謎。 DEMO コードはこちら。 github.com ポイント SVGで複数行のテキストを表示するには、foreignObject + divを使うのが定番らしい。 ただしその場合、IE11は見捨てなければならない。 cacooなんかもIEは非対応にしている。 エディタに関してはSVG外でやっている。cacooをみると、absoluteでiframeとcontenteditableを乗っけている。 iframeを介す理由は謎だけど、IE対応のためかも?という話を教えてもらった 今回はプレーンテキストでいいので、textareaをabsoluteで単に乗っける形とした。 詰まったとこ 下記のエラーが出てしまう。computedにしたselectedItemが、参照するときに関数として取れてきてしまう。 (30

    Vue.js + SVG練習8 : 付箋を作った&vuexに入門した - No Regrets in Bathing
    syonx
    syonx 2022/04/23
  • グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing

    これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい!!という一心でやっています。 これらはほとんどSVGVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i

    グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
    syonx
    syonx 2017/12/05
    この記事を参考に自分もつくりました https://syonx.hatenablog.com/entry/2022/04/29/232748
  • 1