SVGの2次ベジェ曲線の制御点をドラッグで動かすサンプル - Qiita
function getClientPointInSVG(ev) { var p, m; p = svg.createSVGPoint(); p.x = ev.clientX; p.y = ev.clientY; m = dragElem.getScreenCTM(); return p.matrixTransform(m.inverse()); } ドラッグ開始時にオフセットをとっておく mousedownイベントで制御点とマウスイベントの点のずれを保存しておきます。mousemoveイベントでは、そのずれを維持しつつ制御点を移動します。 どの要素にイベントハンドラをセットするか mousedown: 制御点(ドラッグ対象) mousemove, mouseup: svg要素 mousemoveとmouseupのハンドラをsvg要素ではなく制御点につけてしまうと、マウスを素早く動かして制
連載インデックス「D89クリップ Webデザインに役立つできごと／ヒントになるインタビュー」 - ＠IT
連載インデックス 「Webグラフィックをハックする」 知って得する、Webブラウザ上で利用できるグラフィック関連技術。 読み切りで分かりやすく紹介する 多彩な表現力のWebGLを扱いやすくする「Three.js」 Webグラフィックをハックする（5） Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードで、効率良く学ぼう
Snap.svgの使い方まとめ
Snap.svgの使い方 まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています（これは動作サンプルであると同時にテストコードと言えるものですね）．なお間違いがあったり，バージョンアップに伴う不整合が発生するかも知れませんので，その点ご容赦下さいね．やっぱり手でゴリゴリ書いてます． なお，Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません．Snap.svgを上手く活用したいのであれば，背後で動いているsvgについてよく知っている必要があります．そのため，ある程度SVGやプログラミングの知識があることを前提に話を
電子回路を作る基礎を学びNode.jsでボードを操ろう
1. USBジャック ここにUSBケーブルを挿して、PCとつなぎます。Arduinoボードに電源を供給するだけではなく、ボードで実行されるプログラムを書き込んだりするために使います。 2. デジタルIN/OUTピン 次は、ボード上側にある黒い部分。穴が空いていて、ワイヤを挿せるようになっています。ここから回路に電圧をかけたり、電圧の値を読み取ったりすることができます。 デジタルという名前の通り、HIGHとLOWだけを扱えます。電圧をかけるときは5V、かけないときは0Vになります。電圧を読み取るときも、HIGHとLOWの区別だけができます。 穴のすぐ下に、0から13の数字が書いてありますが、これがピンのIDを表しています。プログラムを書くときは、「DIGITAL PINの13番から電圧をかける」というような処理を記述します。 3. インジケーター インジケーターが3つ並んでいます。これも役割
Raspberry PI と Hubot で観葉植物の水やりを自動化する
Raspberry PI と Hubot を使って、Slack から観葉植物の水やりを実行できる装置を作りました。 材料 Raspberry Pi Type A 256MB GPIO 拡張ボード ジャンパワイヤ スピーカーケーブル エポキシ接着剤 灯油缶 アルミ線 S8050 トランジスタ (詰合せで購入) 灯油ポンプ チューブジョイント シリコンチューブ (4mm x 6mm) コルク栓 回路 灯油ポンプ に直接はんだ付けして、+- 極をスピーカーケーブルでブレッドボードに引っ張ってきて、Raspberry Pi から 5V 電源を供給します。 S8050 トランジスタにはそれぞれ、 E (エミッター): Raspberry Pi GND B (ベース): Raspberry Pi GPIO 0 C (コレクター): 灯油ポンプの - 極 が接続されています。 パイプの分配 植物への水の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
