サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Wikipedia
defghi1977.html.xdomain.jp
written by DEFGHI1977 [重要] auonenetホームページ公開代理サービス終了に伴い、公開済みの各種ドキュメントをxdomainサーバーに移行しました. 旧アドレスへのアクセスは本ページにリダイレクトされます. お手数ですがブックマークやリンクなどのURL参照先の更新・変更をお願いいたします. You were redirected from old "dion(auonenet)" page which had been out of service. Please update URL settings of your bookmarks, links or more. Thank you. 突貫工事で作ったため, 抜けがあるかもしれません. ゲームツール等(game tools) 悪魔城ドラキュラHoD(Castlevania HoD)・アイテム早見表(Cas
www.h2.dion.ne.jp/~defghi
witten by DEFGHI1977@xboxlive 変換前(透過PNG画像) ファイル: サイズ:Byte 変換後(SVG+JPG画像) JPG品質:% サイズ:Byte(%) これは何? 本スクリプトは,透過PNG画像を同等のSVG画像に変換するものです.元画像をより軽快なJPG画像としつつ,透過部を定義できることことから昨今注目を集めているテクニックです.本スクリプトでは元画像をトリミングしている他,マスク画像を8階調(3bit)のPNG画像としているので,透過部の形状を維持しつつファイルサイズを大幅に縮小することに成功しています. ※似たスクリプトとしてはZorroSVGがありますが,こちらではfilter要素を使っていて見た目上は,似たようなものです.が,マスク画像がJPG形式なので,品質を落とすにつれ境界部のノイズが目立ちやすくなります.この点を改良したものがこのスクリプ
wittern by @DEFGHI1977. インラインSVGがボケる原理 スタンドアロンのSVGでは描画結果をくっきりとさせるため, strokeプロパティに依る線の描画に細工を施す場合がある. 例を示す. 素朴な例 (1)素朴な例 0.5pxずらす例 (2)0.5pxずらす例 2px幅とする例 (3)2px幅とする例 上記の格子をスクリーンデバイスにおける1画素とし, 黄線をストローク(線)を引く基準ラインとする. (1)では幅1pxの黒色のストロークを引こうとしている. この場合, SVGの仕様により描画内容が画素の境界を跨いでしまうが, 一般的なwebブラウザではこのようなケースに於いてグラフィックの内容を近似しようとする. そのため出力結果に本来の黒色よりも薄いグレーの部分が発生してしまうのだが, これがSVGがボケる原因である. この問題を解決するには(2)のように基準
カスタム図形定義スクリプト 「customShapes.js」 〜面倒な図形も簡単に記述できるかも〜 written by DEFGHI1977@xboxlive 更新履歴 2014/08/06 ver0.03 新規作成,公開開始. はじめに 本ページでは拙作「customShapes.js」についての紹介と動作サンプル(兼テストケース)について解説します. customShapes.jsって何? customShapes.jsは一言で言うと「SVGにおける再利用可能な図形要素を定義する仕組み」を提供します. SVGが標準的に提供している図形要素はline, polyline, polygon, rect, circle, ellipse, pathの7要素しかなく,お世辞にも使い勝手が良いとは言えません.一般的なjavascriptライブラリではこれら以外の図形を描画する専用メソッドが用
Snap.svgの使い方 まとめ How to useすなっぷ.svg タイトル svg要素の基本的な使い方まとめ・別館 written by DEFGHI1977@xboxlive 本記事ではsvg世代のjavascriptライブラリとして有望なSnap.svgの使い方について実際に動作しているサンプルを交えて解説しています(これは動作サンプルであると同時にテストコードと言えるものですね).なお間違いがあったり,バージョンアップに伴う不整合が発生するかも知れませんので,その点ご容赦下さいね.やっぱり手でゴリゴリ書いてます. なお,Snap.svgを用いたSVG(もしくはjavascriptの)入門記事ではありません.Snap.svgを上手く活用したいのであれば,背後で動いているsvgについてよく知っている必要があります.そのため,ある程度SVGやプログラミングの知識があることを前提に話を
written by DEFGHI1977@xboxlive 本ページでは拙作のjavascriptライブラリ「SVGGraph.js」の動作を確認することが出来ます. 詳しい使い方について…こちらをご覧ください. ※現状製作中につき,内容については告知なく変更されるかもしれません.ご了承ください. グラフ描画スクリプトの内容を適宜書き換えて「更新ボタン」をクリックしてください.また,「表示」ボタンをクリックすると,現在のグラフを別ウインドウでグラフを表示します.ブラウザの「ファイルに保存」機能を使うことでグラフ内容をsvgファイルに出力することが出来ます.
お手持ちの画像(jpg,png,gif等)をsvg形式に変換します.本プログラムで作ったsvg画像は元画像のピクセル情報を維持するように設定されているので,拡大してもドットがぼやける心配がありません. その為,ドット絵に適したスクリプトとなっているのですが,一般の画像においてもサイズがそこそこ(600px平方位)なら減色処理を行うことで割とまともに動作するsvg画像となります. 前回公開したものは,1ピクセル毎に1要素を設定していたため,出来上がったsvg画像が重すぎると言った問題がありましたので,今回は色毎にpath要素に集約して見ました.従って,このバージョンでは色数が少ないほうが上手く行きます. 動作はfirefox,chrome,operaで行なっています.webworkerが動作する環境でお試しください. chromeではsvgの動作が芳しくないため,処理結果そのものに問題は
ヒント お手持ちの画像を分割して手軽にsvgフォント化することができます.処理が完了するとsvgファイルへのリンクが表示されるので,右クリックをしてファイルに保存して下さい.svgファイルはテキストエディタで編集することができます. svgフォントを使うと例えばこんなことができます. 自動的に画像を区切ってグリフ(文字の形)に変換しますので,フォント化したい図形を予め並べた画像を用意して下さい.ハイライトされた範囲がグリフに変換されます.文字画像の大きさは32px平方以上のサイズに対応しています. グリフにはunicode私用領域(外字領域)の先頭「U+E000」から順にユニコードが割り振られます.使い勝手が悪い場合はglyph-name属性を手がかりにglyph要素のunicode属性を書き換えてしまいましょう.要らないglyphを削除するのも手です. グリフに任意のコードを割り振る機
ヒント お手持ちのsvg画像からフォントとかパスを抽出してsvgフォント化することができます. フォント情報が見つからなかった場合,パスを抽出します.一つのパスを文字として解釈します. ファイル読み込み時にパスのリサイズや位置の調整を行うことができます.いろいろ試してみましょう. 文字をクリックすると内容を編集することができます.位置の微調整等を行う際にご利用下さい. 余りに複雑なsvgファイルを読み込んだ場合,スクリプトが応答しなくなる場合があります.(このような図形はそもそもフォントとして不適でしょう.) 本スクリプトで生成したsvgフォントファイルは全ての環境で正しく動作するとは限りません.webkit系/operaのブラウザで試すか,下のサービスを使って他の形式に変換して使いましょう. ここで生成したsvgフォントファイルはicomoonでeot,ttf,woff形式に変換できます
Written by defghi1977@xboxLIVE.この文書は全てテキストエディタで作成しています.えーと,そりゃもうゴリゴリと. Powered by sie. 21.sieを用いたベクタグラフィックの描画 Internet Explorerはバージョン8までsvgに対応しておらず,バージョン9になってからようやくsvgの描画に対応した.しかし,windows XPが依然それなりのシェアを保っている事などからie8の利用は暫くの間続くものと思われ,web制作の足かせとなっているのは否めない.これらの制約を緩和する方法には様々なものがあるが,ここではsvgを古いieでも表示可能とするjavascriptライブラリ「sie」の利用したsvgの表示について説明する.なお利用したバージョンは1.0である. ※このページはie8で動作を確認しています. ※現状,sieはsvgの一部
次のページ
このページを最初にブックマークしてみませんか?
『www.h2.dion.ne.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く