岡田を切る技術 - Qiita
これはとある回顧録 何度も諦めかけましたが、数年の歳月を経て遂に岡田を切る技術が一旦の完成へと至りました。その技術を巡る奮闘の歴史と成果について、ここに記録を残していきたいと思います。 画像時代 まずは「切る」という動作が何を指すかを明確にしておきます。 厳密な定義というよりは、切った感を得るために必要そうなふるまいとして定義します。 平面上のある領域が、任意の直線を境界として分割されること 分割された領域は物理法則に準じてふるまうこと 要するに気持ちよく岡田を切ることができれば目標は無事達成です。 物理エンジン 切った感を高めるためにはやはり「物理法則」に準じたふるまいが欲しくなります。つまりブラウザ上で動く物理エンジンが必要です。 世の中にはフルスクラッチで物理エンジンを作れる人間と作れない人間が居ると思われますが、残念ながら私は後者でした。勝ち目の薄い勝負は避け、素直に巨人の方にすが
グリグリ動く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
JavaScriptでSVGを書く - NullPointer's
IE9はSVGをネイティブ実装するそうだ。SVGが主要なブラウザの標準機能になればWebアプリでもデータをグラフ化してビジュアル的に表示する、なんて要件も普通に求められるようになるだろうな。 というわけで今のうちにちょっと触れておこう。 SVGはXML形式のベクタ画像フォーマットなので、imgタグとかobjectタグで表示するだけではなく、XHTMLに直接埋め込む事ができる。もっともFirefox 3.6とか最近のブラウザでもHTMLへの埋め込みには対応してない*1ようだが、IE9が出るまでには対応されるだろう。 また、SVGはXMLなのでJavaScriptでDOMインターフェースを介して操作できる。現行のFirefoxでもJavaScriptを使ってSVGを動的生成し、HTMLに追加した場合は正しく表示されるようだ。 HTML埋め込みにせよ、JavaScriptで操作するにせよ従来のH
HTML5のInline SVGをJavaScriptで操作 (1/5)
HTML5で手軽に扱えるようになったSVG（Scalable Vector Graphics）。前回は、Inline SVG（インラインSVG）で基本的な図形を描く方法を解説しました。今回は、HTML5文書内に埋め込まれたインラインSVGをJavaScriptで制御します。 JavaScriptでSVG要素にアクセスする 最初に、制御対象となるSVGデータを作成しましょう。JavaScriptで制御したいSVG要素にはid属性を記述し、ID名を付けておきます。通常のHTMLタグ（要素）にID名を指定する場合とまったく同じです。たとえば<rect>（四角形）を制御したい場合は以下のように記述します（ID名は任意）。 <svg> <rect id="myBox" x="0" y="0" fill="red" width="100" height="80" /> </svg> ID名を指定してお
SVG 出力できるドローツールコンポーネント「Closure Draw」を公開しました - WebOS Goodies
WebOS Goodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOS Goodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。 先々週、 Python Hackathon #3 でのハンズオンの題材として 簡易ドローツールを公開しましたが、せっかくなのでもう少し実用的なものに発展させて、 Closure Draw というライブラリとして公開しました。特徴・機能は以下のとおりです。 長方形、楕円、テキスト、画像、直線パスを描画。 図形の移動、回転、削除、重なりの順序変更。 パスの頂点の編集。
SVG入門（SVGについて詳しく解説します
SVGとはScaleable Vector Graphicの略で２次元グラフィックをXML形式で記述するための規格です。このサイトではSVGについて入門レベルの知識から詳細なテクニックまでをご説明していく予定です。 SVGの特徴としては次のような点があげられます。 XML形式の文書でグラフィックを表現できるため、エディタとブラウザさえあれば開発できる ベクター画像なので拡大・縮小が容易である 画像の変更をXML文書の変更として行えるため、ラスター画像の変更よりも容易な場合がある XML形式なのでSVG文書をパース、生成するプログラムが書きやすい（DOM APIを利用できるため独自のパーサーやジェネレータを作る必要がない） 一方でSVGが抱える問題は、ブラウザに標準機能として搭載されるか、あるいはすべてのブラウザで利用できるプラグインが提供されるかどうかということです。ともかくブラウザで
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
anime.js
Noun Project: Free Icons & Stock Photos for Everything