[SVG|JavaScript] transformされたローカル座標をSVGの座標に変換したい

2018/03/30

こんにちは。きんくまです。

今回は座標変換です。
座標変換は、ローカル座標からグローバル座標に変換したり、その逆のパターンがあります。

それでgなどが入れ子状態になっていて、それぞれがtransformされている中に入っている子供の要素の座標(ローカル座標)から、SVGからみたときの座標(グローバル座標)に変換したかったです。

参考サイトなど
>> SVG localToGlobal – JSFiddle
>> SVG coordinates with transform matrix

getCTM()を使って変換行列を取得する

そのような入れ子状態だとしても、getCTM() を使うと SVGの座標に変換してくれる行列が手に入ります。

>> SVGGraphicsElement

変換するときは matrixTransform() を使います。

サンプルコード

こんな感じに、transformされたgの中にあるcirlceがあるとします。
青が元の座標においたもの、赤がgの中に入ったので移動したものです。
最近知ったのですが、cssのtransformは中に scale translate みたいに連続で変換を書けるんですね。matrixを使わないといけないと思ってました。

この投稿の続きを読む »

LINEで送る
Pocket

[SVG|JavaScript] JSにSVGを埋め込んで、パースしたSVGをいろいろやりたい

2018/03/28

こんにちは。きんくまです。

イラレから書き出したSVGのデータをhtmlに取り込む方法はいろいろとあります。
外部SVGを非同期で読み込んだりとか。
でも今回は、JSにSVGを静的に埋め込んで、パースしたSVGを使いたいです。

JSにSVGを埋め込む

埋め込むといっても、ES6のヒアドキュメントを使えば簡単です。
イラレから書き出したSVGには id とか title とか入っているので消しておきました。あと下のデータめっちゃ適当です。

export const SVGData = `
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 768">
  <rect x="131" y="121" width="637" height="449" fill="#29abe2" stroke="#000" stroke-miterlimit="10" stroke-width="10"/>
  <circle cx="536" cy="229" r="163" fill="#ff0" stroke="red" stroke-miterlimit="10" stroke-width="10"/>
  <polygon points="262 81 323 221 501 212 496 481 262 459 78 443 261 345.5 262 81" fill="#006837" stroke="#7ac943" stroke-miterlimit="10" stroke-width="10"/>
  <path d="M381,490c41.18-56.62,118-136,171-42s101,52,136,24l46,70s-180,35-255,17S341,545,381,490Z" fill="blue" stroke="#7ac943" stroke-miterlimit="10" stroke-width="10"/>
</svg>
`;

slackとか、markdownみたいに バッククォートを3個書いてうまくいかなかったのはナイショです。
ヒアドキュメントは1個で良かったです。

この投稿の続きを読む »

LINEで送る
Pocket

[JavaScript] 動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう

2018/03/21

こんにちは。きんくまです。

今回は、「動的SVGからpngを作りたいときはcanvgを使う。Image.src経由だとIEのSecurity Errorが出ちゃう」です。(長い)
SVGを動的にJavaScriptでいろいろいじったものを画像化したかったのですが、最初にやってた方法だとIE11でエラーが出てしまいました。

2018年3月の現時点だと、SVGから直接png化するメソッドはなさそうです。
なので、SVGをcanvasに描画して、そこからtoDataURLでbase64化するという流れになります。

でハマった方を書く前に忙しい方のために、先にcanvgを使った方法を書いておきます。

canvgでsvgを画像化する

>> GitHub – canvg/canvg: Javascript SVG parser and renderer on Canvas

canvgはSVGをパースして、Canvasの中に再現するライブラリです。
この投稿の続きを読む »

LINEで送る
Pocket

[TypeScript] Vue.jsでVuexを使わないでstate管理をしたい

2018/01/27

こんにちは。きんくまです。

前回 Vue.js+TypeScriptのパターンを書きました。
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい -> 成功した

今回は、「Vuexを使わないでstate管理をしたい!」です。

Vuexは、fluxパターンのReact向け実装のReduxをVue向けに作ったものです。
>> What is Vuex?

で、Vueを使った時の状態管理の定番みたいに扱われています。

ただ、ReduxもVuexもチュートリアルをやったり、実際にそれを使って書かれたソースを読んでみたのですが、どうにも好きになれませんでした、、。好きな方がいたらすみません。
理由としてはいくつかあるのですが、一番の理由は冗長なこと。後からソースを追うのに関係ファイルが増えすぎること。
たぶん数学的なのかプログラム的にはとても素晴らしいライブラリだと思うのですが、私にはオーバースペックでした。
で、普通のクラスでStoreを作って状態管理をしたくなりました。

自前でやるとき、fluxパターンの肝となるのは、

1. イベントの方向性
viewからイベント -> api -> store -> view更新

2. storeの外でstateを操作しない
(例えばcomponent内で直接いじるのはNGで、store内に操作メソッドを作る)

だと思いました。なのでこれを守れば大丈夫なのではないかと。

※2018/01/31 クラス名を変更したり、stateのアクセス方法をgetter,setterに変更しました

クラスでStore作って状態管理

いろいろと試してみて、失敗ばかりだったのですが、公式ドキュメントに載っている方法でうまくいきました。
>> State Management

できたもの

Storeクラス

Storeクラスです。Modelのルートになります。
newしたインスタンスをexportしているので、どこからでもアクセス可能なのですが、基本は親コンポーネントからpropsで子供コンポーネントに渡していく方が良いかと思います。

countプロパティを保持しているだけで特別なことはしていません。

Store.ts

import Count from "./Count";

export class Store {
    count:Count = new Count();

    constructor(){
    }
}

const store = new Store();
export default store;

この投稿の続きを読む »

LINEで送る
Pocket

[TypeScript] Vue.jsをTypeScriptで使ってみたい -> 成功した

2018/01/27

こんにちは。きんくまです。

ちょっと前にVue.jsをTypeScriptで使うのを試してみたら、うまくいったのでメモです。

実は今までに何度か挑戦してみているのですが、理想の形になっていなかったのでダメでした。
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい
>> [TypeScript] Vue.jsをTypeScriptで使ってみたい2

ところがそれから、Vue.jsもTypeScriptもバージョンアップしてうまくいくようになっていました!

ソースはgithubにアップしました。
>> KinkumaDesign/vue-ts-counter

やりたいこと

・コンポーネントごとにファイルを分けたい
・TypeScriptを使いたい
・SCSSを使いたい
・コンポーネントの中でも、.vue / .scss / .ts ファイルに分割したい

という感じです。

あと、TypeScriptの場合は ES6のような書き方のパターンと、デコレータを使ってclassを使うパターンがあります。
ここは迷うところなのですが、ES6のようなパターンにすることにしました。

参考
>> Microsoft/TypeScript-Vue-Starter

理由としては、デコレータパターンだと微妙に@Componentとclass内にプロパティが分割しちゃったりするのと、ES6パターンの方が他の人に引き継ぎやすいという感じです。このあたりは好みなので、気にしないでください。

そんな感じです。

LINEで送る
Pocket

[日記] 2018年 あけましておめでとうございます

2018/01/4

こんにちは。きんくまです。
あけましておめでとうございます。

冬のオリンピックの年ということで、スキーをしている犬を描いてみました。

フリーランスになって10年経ちました

フリーランスになってから、丸10年経っていたみたいです。
なんだか早いです。

最近こんな本を読みました。

「作曲・編曲・作詞でプロになりたい人が 成功する方法 挫折する理由」

私が作曲家になりたいわけではないのですが、興味があったので。

それで、この本でこんなことが書いてありました。(他にもいろいろと書いてあって面白かった)

・自分を更新していく柔軟性をもつ
・世の中の流行っているものをまずは味わう(聴く・観る・食べる・読む・体験する等々)

たぶん自分の本当の芯となるものは無くしちゃいけないし、無くせないものだと思います。
(消そうとしてもにじみでてしまうものが、個性というのかなと)
でも、かたくなに今の自分を守るばっかりで、新しいことを受け入れないのはダメだよ。
味わった上で、好き嫌いを言って、取り入れるか取り入れないのは自由。
まずはどうしてそれが流行っているのか、体験して考察してみよう。

という感じかなと思いました。

プログラマーという職業にあてはめてみるとこういう感じかな。

1. 新しい技術が流行る
2. 試してみる
3. どこがスゴイのか、どうして流行っているのか考える(好き嫌いは別)

2の試してみるタイミングは人それぞれだと思います。興味の度合いやその時の時間の有無もあると思います。
新しいものを見つけた瞬間に片っ端から試してみたり、よく見かけて興味があるからやってみたり、無視できないほど広まっているからやってみたり、案件で使うことになったからやってみたり。

共通点としては、ともかくやってみるってことですね。

なんでこんなこと書いたかっていうと、長く職業プログラマーをやっていたいからです。
これまでの経験もあるので、古い技術のまま実装することもできるけど、やっぱり新しいことも少しずつでも取り入れていきたいなと。
一応これまでも意識してやってきたつもりですが、気持ちをひきしめてやっていこうと。

私の場合、受託の案件の業界が教育とか保険だったりすることが多く、ちょっと古めの環境でも動かさないといけなくて、最新の技術というよりは、ちょっと枯れてきたぐらいのものを使うことが多いです。
技術をチェックするときも、どのバージョンのOSやブラウザで動くのかをまずチェックします。
でも今すぐには使わないとしても、触ってみるのは大事かなと。直接触って動かさなかったしてもAPIを眺めたりするだけでもよいかもしれないですね。

というわけで、特にまとまりがないんですが、こんな感じで今年もやっていきたいと思っております。
よろしくお願いします。

LINEで送る
Pocket

[AS3 | Excel] ExcelのRGBの計算方法はAnimate(Flash)と違ってたよ

2017/12/28

こんにちは。きんくまです。

もう年末ですね。

さて、今回はExcelのRGBの計算方法についてです。誰トクなのかわからない情報なのですが、誰かの役に立つかもしれないので、、、。

ExcelのVBAでセルに色を塗るときに RGBを使って

Cells(1, 1).Interior.Color = RGB(255, 100, 30)

とかってできます。それで、RGBを使わずに数値に置き換えることも可能です。
ロング型の整数を入れてあげれば良いみたいです。ここではテキストをロング型に変換して設定しています。

'値は上のとイコールじゃないです
Cells(1, 1).Interior.Color = CLng("123456")

それで、AS3とかJavaScriptだとRGBを整数に変換するときはこうなると思います。

var red:int = 200;
var green:int = 100;
var blue:int = 30;
var rgb:int = red * 256 * 256 + green * 256 + blue;
//ビット演算を使うとこうゆう風にも書ける
var rgb:int = red < < 16 | green << 8 | blue;

でも、調べてみるとExcelのRGBは計算方法が違っていました。
青(B)が16ビット分あがって、赤(R)はそのままなんですね。

var rgb:int = red + green * 256 + blue * 256 * 256;
//ビット演算を使うとこうゆう風にも書ける
var rgb:int = red | green < < 8 | blue << 16;

ビットマップデータBitmapDataからExcelのRGB用のCSVテキストに変換する

この投稿の続きを読む »

LINEで送る
Pocket

ページトップへ戻る