グリグリ動くUIをVueとSVGでサクッと書く - No Regrets in Bathing
これは Vue.js #3 Advent Calendar 2017 – Qiita 4日目の記事です。 こんにちは。SVGで色々なコンポーネントを作っているものです。最近の作品は下記のような感じです。 Webでグリグリ動くUIを作りたい！！という一心でやっています。 これらはほとんどSVGとVueの組み合わせのみで作っています。依存が少ないというのは大事で、ライブラリ間の相性でハマったり、いろんなドキュメント間を往復することがなくなります。 Webでグリグリ動くUIを作るのは基本的にめんどくさいです。jQuery pluginを駆使して作るのも闇が多いですし、divやcanvasをゴリゴリするのも結構手間がかかります。 ですが、最近はSVGで高度なUI実装されることが増えてきた気がします。特に自分が衝撃を受けたのは、CacooがFlashからSVGにスイッチしたことです。 nulab-i
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
中学生でもわかるベジェ曲線
ベジェ曲線をレンダリングしていたら面白くて丁寧に描いてしまった。せっかくなのでこれを使って誰にでもわかるように（たぶん中学生でも分かるように）ベジェ曲線というものが何かを説明してみたいと思う。 ベジェ曲線というのはなめらかな曲線を描くためのものなのだけど、説明はまず単なる直線から始めることになる。この下の図の点の動きがすべての基本になるからだ。 一本の直線があって、その上を点Mが一定の速度で移動している。この点Mの軌跡は、もちろんだけど、単なる直線になる。いいよね。tというのは線分上をどれだけの割合進んだのかを表す数値だ。 もうひとつ線を増やして、その上に、Mと同じように移動する点をもうひとつ増やすことができる。もともとの点MをM0、新しい点をM1と呼ぶことにしよう。M0とM1が動くルールは同じままだ。M1が増えても特にややこしくなっていることはないね。 さて、ここでM0とM1をつなぐ線を
svg要素の基本的な使い方まとめ
3.図形の描画と図形のグループ化 SVGにおいてはグラフィック描画の手続きをXMLツリーとして表現する．様々な要素の組み合わせで複雑なグラフィックを構成するのだ．本項では最も基本のpath要素とその他の基本図形要素，及びg要素による図形のグループ化について説明する．これらの要素はSVGを表示可能な全ての環境で動作し，簡単なグラフィックであればこれだけで十分に間に合う． path:パス図形の描画 path要素は任意の図形を表す．図形定義が柔軟に行えるが，円や四角などの単純な図形を描画するだけなら後述する専用の要素を使ったほうが良い． パス図形の定義 d属性には曲線を引く際のコマンド(パスコマンド)のリスト(パスデータ文字列)を指定する．パスデータ文字列の前から順にコマンドを実行し，得られた(曲)線に囲まれた領域をパス図形と呼ぶ．SVGにおけるグラフィックはこのパス図形を元に描画される． d属
パス - SVG: スケーラブルベクターグラフィック | MDN
« 前のページ 次のページ » <path> 要素は、 SVG の基本図形ライブラリーの中でもっとも強力な要素です。これは、直線、曲線、弧などを作成するために用いることができます。 パスは、複数の直線や曲線を組み合わせて複雑な形状を作ります。直線だけで構成された複雑な形状は、 <polyline> として作成することができます。 <polyline> と <path> は似たような形状を作ることができますが、 <polyline> は曲線を表現するのに大量の小さな直線を必要とするため、大きなサイズにはうまく拡大することができません。 SVG を描画する際には、パスをよく理解しておくことが重要です。XML エディターやテキストエディターを使用して複雑なパスを作成するのはお勧めできませんが、それらがどのように機能するかを理解しておけば、 SVG の表示問題を特定して修復することができます。 <
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
