ねごとめも背景

ねごとめも

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


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

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

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

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

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

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

2017/10/05 [02:42]

JS アニメーションイージング 作成テスト (e)

以前作成した → JS アニメーションイージング 作成テスト(d)では、
パスを切断、分割する場合にマウス座標と、
パスの描画座標を取得するため、
制御点を分割した割合上にある座標にパス切断座標を置いていました。
そのため、制御点を大きな値で分割してしまうと、
マウス座標と分割する位置に大きな差が出来てしまうことがありました。
そのため、制御点を分割する割合を小さくする必要がありました。

今回のは、制御点を大きな値で分割してもズレがないようにしてみました。

マウスの座標でパスを分割、切断するようにしてみました。が、、、
この方法が正しいのかは分かりません。。。_( _´ω`)_

2017/09/26 [22:25]

カウンター

プロフィール

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
広告: