ねごとめも背景

ねごとめも

数学、電気の勉強始めました!プログラムにも挑戦しています!|ω・)ノ


作成したプログラムは、こちらでも公開しています。
よかったら覗いてみてください。_( _´ω`)_
→ javascript,SVG で作成したプログラム置き場

簡易 SVG エディタ 作成テスト (b)

[ HTML SVG 制御点移動等 ]
前回の続きです。
簡易 SVG エディタ 作成テスト (a)
前回のは、制御点追加、直線パスの描画だけでしたが、
カーブ(三次ペジェ)も描画出来るようにしました。
描画中であれば制御点を移動することが出来ます。
また、レイヤーの中の要素選択、表示切り替えも出来ませんでしたが、
レイヤーの中に子レイヤーを作って要素選択、表示切り替えが出来るようにしてみました。
要素の複数選択、コピー等の機能も追加しています。

描画中の制御点移動がある程度出来上がったので、
試しに、ソーナンスを描いてみました。
それを書いていて、気付いたのが、
要素を一つ一つ選択してのプロパティ変更に手間取ること。
なので、選択した要素を一度に変更出来る機能を追加出来たら、と思ってます。

動作確認は、、、、。
レイヤーを二、三枚作って、カチカチやって
確認できたエラーを修正しておわり、、、って感じです。
レイヤー、要素を大量に作ってのテストには手を出していません。。。
ヽ(´ー`)ノ

2017/10/24 [01:20]

簡易 SVG エディタ 作成テスト (a)

以前作成した JS Easing 生成ツール?で SVG の描画をやりました。
JS アニメーションイージング 作成テスト (e)

それを作成していて、簡単な SVG エディタ なら出来そうな気がしたので、
挑戦しています。
現在の状況は、大まかな部品配置、レイヤー処理、パスのプロパティ?( 色等 )変更、
制御点追加、直線のパス描画までです。
描画域クリックで制御点を追加していきます。
描画域ダブルクリックでパスを閉じます。
色などの変更は、パスの描画前か、描画中のみです。
パスを閉じた後は、色などの変更は出来ません。ヽ(´ー`)ノ

色の変更が特にわかりにくいです。
自分で作成したのに混乱したりします。
左のチェックボックスで色設定、
右のチェックボックスで表示切り替えだったりします。。。
描画中は fill の変更は反映されません。
パスを閉じた後に反映されます。。。
stroke の破線 ( dasharray ) は半角の数字をカンマで区切ります。
例 : 10,10

ゴールは、以前作成した JS Easing 生成ツール?の
SVG 描画の処理に、
レイヤーと、色等を変更する機能をつけられたらと思っています。

2017/10/05 [02:42]

カウンター

プロフィール

negotoy

Author:negotoy
電気の勉強始めました!
テキストエディタを使ってプログラミングに挑戦中。fc2 ブログに公開しているテンプレート等は、自由にカスタマイズして、ご活用ください。プログラム実行の前に必ずコードの確認をお願いします。

最新記事

カテゴリ

カレンダー

09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -


PAGE TOP
広告: