ふつーのドラッグ出来たりリサイズ出来たりする付箋。 SVGで作る必要があったのかは謎。 DEMO コードはこちら。 github.com ポイント SVGで複数行のテキストを表示するには、foreignObject + divを使うのが定番らしい。 ただしその場合、IE11は見捨てなけれ…

動いてるところは下記ツイートから見れる（gifがでかくなりすぎてはてなにアップロードできなかった） 文字をアニメーションさせて遊ぶやつができた https://t.co/mTYNrkBLxi pic.twitter.com/UT4inhu0My— はっしゅろっく (@hashedrock) 2017年11月18日 デモ…

ズーム＆パンできる折れ線グラフを書いた。グリッドライン付き。 こういったグラフや、ズーム・パンはd3の得意技なのだけれど、あえてSVGを組み上げる部分をd3でやらずVueのテンプレート側でやっている。 スケーリングや、グリッドラインの位置決めなんかは…

TypeScriptを使いたい、型に守られたいという気持ちが定期的に生まれるのだけど、 ただwebpack.config.jsとtsconfig.jsonが上手く書けなくてしんどいみたいなことがままある。 お仕事的に、TypeScript + Vueでやっていくぞというのは下記のダーシノさんのス…

ただし、やりすぎると爆発する。 動作確認は以下より。 hashrock-sandbox.github.io ソースはこちら。 github.com ポイント 小ネタなので特にないかな… 早めに寝たいので、短い時間で実装できる題材を結構考えた 小ジャンプは、2次関数でやるパターンと、y変…

SVGをグラフィックエディタでいじる方針のリベンジをしたかったので、今回は下記のようなピアノを作った。 下記から動いているところを試せる（音が出ます） hashrock-sandbox.github.io 前回Inkscapeで撃沈したあと、色々試した所、Method Drawというオンラ…

３作目。こっそり戻るスライダーを実装しよう。 素のSVG手書きするのちょっと辛すぎたんでInkscapeを使うことにした。 Inkscapeも辛くないということはまったくないけど…、うーん。Sketchの方が楽かな。Mac版は持ってるんだけど。 こんな感じ。 で、動かした…

Vue.jsは「vue-cli」という便利なCLIツールがあって、下記のコマンドでvueファイルの単体起動をすることが出来た。 vue build MyComponent.vue で、この機能なんだけど、いつの間にか削除されていたようだ。 もともとegoistさんという方がvbuildというツール…

あまり体調がよくない（言い訳）ので、今日は軽め。 何の変哲もないsparkline。可愛くもなんともない。 Sparkline.vue <template> <svg width="300" height="50"> <polyline fill="none" stroke="#793" :points="points"></polyline> </svg> </template> <script> export default { data(){ return { dat: [] } }, computed:{ points(){ return this.dat.map((item, i)=…

Vue + SVGで色々UIを作っているんだけど、素振りが必要だと感じたので、変なものをこしらえて引き出しを増やしていこうと思う。 一作目。 コードはグダグダですみません… CuteButton.vue <template> <svg width="400" height="80" @mousemove="over"> <rect width="200" height="50" rx="8" ry="8" x="20" y="20"> </rect> <text x="120" y="54" text-anchor="middle">I am Button!</text> </svg></template>