|

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

JavaScript: canvas で点線・破線を描くためのライブラリを作ってみた

Javascript + canvas で点線・破線を描画するためのライブラリです。
Description: A library to draw dotted/dashed line for Javasctipt/canvas.

canvas を使ってちょっとした折れ線グラフを書かせてみようとしたところ、点線・破線が描けないので困りました。 なぜ困るかというと、モノクロ印刷するときに系列の区別を付けにくくなるからです。

という訳であまり出来の良くない再発明っぽいですが作ってみました。 ベタに書いてみただけなのでパフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)と思います。

Firefox でしか動作確認していません。

円弧やベジェ曲線は描けません(自前で何とかする必要があります)。

パスを閉じることはできません。たとえば三角形を描くと始点と終点が重なっていても lineJoin が効きません。

ライセンスは MITライセンスです。
License: MIT license

ダウンロード / Download

sonota's anbt-dashed-line.js at master - GitHub
このページの「download」ボタンからどうぞ。

サンプル / Sample


<canvas id="canvas" width="400px" height="400px" />

<script type="text/javascript" src="anbt-dashed-line.js"></script>
<script type="text/javascript">
var cv = document.getElementById("canvas");
var ctx = cv.getContext("2d");

var lineStyle = {
  color: "#a00"
, pattern: "*****-"
, scale: 200
, width: 10
, cap: "butt" // butt, round, square
, join: "bevel" // round, bevel, miter
};

var vertices = [
  [  0,   0]
, [100, 200]
, [110, 150]
, [200, 300]
];

var adl = new AnbtDashedLine();
adl.drawDashedPolyLine(ctx, vertices, lineStyle);
</script>

その他

線の終端の形状(lineCap) と線の接合部(lineJoin)のスタイルについては スタイルと色を適用する - MDC を参照してください。


追記 20091125:
作った後で ActionScript のライブラリを探して移植すれば良かったかも、と思い至りました……という訳で以下参考までに。


追記 20100627:
この記事を書いた時点では SVG が標準になる気配がなかったので canvas 用に書いたのですが、 その後 IE が SVG 対応することが明らかになり、状況が変わりました。 そして、SVG には破線のための API があります。

そこで、特に canvas にこだわらないのであれば、 SVG を使うのも良いと思います。
参考: SVG vs. Canvas? « HTML5.JP ブログ

また、ここで公開しているライブラリを改造する場合や 新たに自作する場合は SVG 用の API とインターフェイスを揃えると良いかもしれません。

アニメーションのデモ / Animation demo

2011-09-08 追記 / 上で「パフォーマンスとかはあまり良くない(アニメーションなどさせると辛い)」と書きましたが、 ものは試しとデモを作ってみました。

anbt-dashed-line.js demo - jsdo.it - share JavaScript, HTML5 and CSS

参考(外部リンク)

スポンサーサイト

Ruby: scrobbler の文字化けにモンキーパッチングで対処してみた

A monkey patching for scrobbler mojibake.

以前適当に書いたのを掘り出してあまり見直さずに貼ってみます。

このコードに続けて scrobbler を使った処理を書くか、 別ファイルに分けて require して使います。

require "rubygems"
require "scrobbler"
require "cgi"

module Scrobbler
  module REST
    class Connection
      MULTIBYTE_CHAR = true

      def request(resource, method = "get", args = nil)
        url = URI.join(@base_url, resource)
        temp_url = url.request_uri
        temp_query = ""

        if args
          temp_query = args.map { |k,v| 
            if MULTIBYTE_CHAR
              "%s=%s" % [k.to_s, CGI.escape(v.to_s)]
            else
              "%s=%s" % [escape(k.to_s), escape(v.to_s)]
            end
          }.join("&")
          url.query = temp_query if MULTIBYTE_CHAR
        end

        req = case method
              when "get"
                if MULTIBYTE_CHAR
                  Net::HTTP::Get.new(temp_url)
                else
                  Net::HTTP::Get.new(url.request_uri)
                end
              when "post"
                if MULTIBYTE_CHAR
                  Net::HTTP::Post.new(temp_url)
                else
                  Net::HTTP::Post.new(url.request_uri)
                end
              end
        
        if @username and @password
          req.basic_auth(@username, @password)
        end

        http = Net::HTTP.new(url.host, url.port)
        http.use_ssl = (url.port == 443)

        res = if MULTIBYTE_CHAR
                http.post(temp_url, temp_query)
              else
                http.start() { |conn| conn.request(req) }
              end
        res.body
      end
      
      private
      def escape(str)
        URI.escape(str, Regexp.new("[^#{URI::PATTERN::UNRESERVED}]"))
      end
    end
  end
end

ちなみに、「コードの世界」第6章に「オープンクラスとモンキーパッチング」という節があり、 「モンキーパッチングの目的」「モンキーパッチング技法」「モンキーパッチングの問題点」などについて解説されています。

まつもとゆきひろ コードの世界~スーパー・プログラマになる14の思考法
まつもとゆきひろ コードの世界~スーパー・プログラマになる14の思考法まつもとゆきひろ 日経Linux

日経BP出版センター 2009-05-21
売り上げランキング : 39923

おすすめ平均 star
starRuby使い向けの教養書
starタイトルを鵜呑みにしてしまいました
starDRY?

Amazonで詳しく見る
by G-Tools

Emacs: shell-mode で日本語が文字化けする場合の対処法

自分の場合、Windows + NTEmacs では:
M-x set-buffer-process-coding-system RET sjis RET sjis RET
または
C-x RET p sjis RET sjis RET

.emacs に書く場合


(add-hook
 'shell-mode-hook
 '(lambda ()
    (set-buffer-process-coding-system 'sjis 'sjis)))

関連

指定できる coding-system の一覧を表示:
M-x list-coding-systems

zipruby: zipファイルのルートがディレクトリのみかどうか調べる

展開したときに、ポンとディレクトリが 1つだけ出てくるか、 それとも複数のファイルがばらっと出てくるか判別する。

require "zipruby"

def filelist_in_zip(zip_path)
  result = []
  Zip::Archive.open(zip_path) do |ar|
    n = ar.num_files
    
    n.times do |i|
      result << ar.get_name(i)
    end
  end

  result
end

def zip_root_dir(zip_path)
  entries = filelist_in_zip(zip_path).map do |path|
    path.sub(/^(.+?)\/.*$/, '\1')
  end
  
  !(entries.size != 1) && entries.all?{ |x| entries.first == x }
end

(solved) Ruby/Tk / Ubuntu 9.04: TkPackage can't find package img::png

環境

Ubuntu Linux 9.04 / ruby 1.8.7 (2008-08-11 patchlevel 72) [i486-linux] / Tk::TK_PATCHLEVEL' #=> "8.4.19"

現象

逆引きRuby/Tk の PNG 画像表示のサンプルコードを実行すると次のエラーが出て動かない。

/usr/lib/ruby/1.8/tk/package.rb:86:in `require': TkPackage can't find package img::png (RuntimeError)

locate tkextlib/tkimg すると
/usr/lib/ruby/1.8/tkextlib/tkimg/png.rb
などが見つかるので、Ruby/Tk 側のライブラリ自体はインストールされている。

解決法

sudo apt-get install libtk-img

その他

JPEG もこれで解決する。

Lisp/Scheme のコメント・文字列・括弧に色を付ける簡易ツール(Javascirpt)

  • ブログなどに貼った Lisp/Scheme 系のソースコードを google-code-prettify のように強調表示(ハイライト)するツールを探してみたのですが、ちょうどいいのが見つけられず……というわけで簡単なのを作ってみました*1 *2
  • キーワードや関数名、シンボルなどには色は付きません。 Lisp/Scheme っぽいものにそのまま使いまわせるようにしたかったのと、 なるべく処理が重くならないようにしたかったので、あまり複雑にならないようにしました。
  • Common Lisp とかはよく知らないのでとりあえず Emacs Lisp を想定してます……
20100417 追記
*1: これを書いたときは見つけられなかったのですが、その後 highlight.js というのを見つけました。こっち(highlight.js)の方がおすすめです。
20120513 追記
*2: これまた見つけられていなかったのですが、google-code-prettify も Lisp に対応しているようです。 README に「LISPy languages are supported via an extension: lang-lisp.js.」とあり、Change Log によれば 2008年に加わったようです。

ダウンロード

gist: 228735 - GitHub からどうぞ。

サンプル

こんな感じで色が付きます。

(defun factorial (x)
  "Calculate factorial." ; 関数の説明
  (if (= x 1)
      1
    (* x (factorial (- x 1))))) ; 再帰呼び出し

動作チェック

;; ダブルクォート文字列
aa "bb" cc
aa "b\"b" cc ; バックスラッシュでエスケープ
aa "b\\b" cc
aa "b;b" cc  ; セミコロン
aa "b(b" cc  ; 括弧
aa "b)b" cc

;; 一行コメント
aa ; bb
; aa"bb ; ダブルクォート
; aa\bb ; バックスラッシュ
; aa)bb ; 括弧
; aa(bb

;; 括弧
aa(bb)cc

;; 記号
(1 . 2)
'()

;; HTMLの文字参照
a < b
a > b
a & b

;; 最後のダブルクォートが不整合
"aa

参考(外部リンク)

Linux で freedb(freedbtest.dyndns.org) に日本語データを送信する

環境: Ubunbu Linux 9.04


いくつか試してみたところ、結局 wine + CDex.exe の組み合わせが無難という結論に至った。 日本語が文字化けしたが、wine の設定を変更するとうまく表示された。

CDex の設定については freedbtest.dyndns.org に説明がある。


Grip は HTTP ではなくメールを送る方式のようで、裏で sendmail が動く。 freedbtest.dyndns.org はメールには対応していないようなので、これは使えない。

Audex が使えるという情報 (Audex - いくやの斬鉄日記 2009-03-08) もあるが、自分の環境では "Submit Info" ボタンがグレーアウトして送信できなかった。

ついでにリッピング

abcde - A Better CD Encoder [ver 2.3.99]
を使う。



** ホームに戻る

|
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。