nkimraの日記

技術的なメモのブログ。

CoffeeScriptのインストールとサンプル

CoffeeScript

HTML5とJavaScriptを使って、画像をドラッグ＆ドロップでCanvasに表示させるという処理をCoffeeScriptでやってみた。

環境

MacOS Yosemite
Safari 8.0.7
CoffeeScript 1.9.3
jQuery2.1.4

作成する画面は次のような感じ。
ページ上部のリンゴかミカンの画像をドロップ先のCanvasにD&DするとCanvas上にドロップした画像が表示される。
f:id:nkimra:20150720003323p:plain

CoffeeScriptのインストール

Homebrewを使ってNode.jsをインストールする。

brew install node
npm install -g coffee-script

CoffeeSriptの実装

dd.coffee

@onDragStart = (e) ->
	e.dataTransfer.setData("text", e.target.src);

@onDropOver = (e) ->
	e.preventDefault();

@onDrop = (e) ->
	cnvs = $('#canv')[0];
	ctx = cnvs.getContext('2d');
	img = new Image();
	img.onload = ->
		ctx.drawImage(img, 0, 0);
	img.src = e.dataTransfer.getData('text');

@(this)を付けないと関数が見つからないというエラーになった。
上記のソースをターミナルで「coffee -c dd.coffee」でJavaScriptにする。
コンパイルしたJavaScriptは下記。
dd.js

// Generated by CoffeeScript 1.9.3
(function() {
  this.onDragStart = function(e) {
    return e.dataTransfer.setData("text", e.target.src);
  };

  this.onDropOver = function(e) {
    return e.preventDefault();
  };

  this.onDrop = function(e) {
    var cnvs, ctx, img;
    cnvs = $('#canv')[0];
    ctx = cnvs.getContext('2d');
    img = new Image();
    img.onload = function() {
      return ctx.drawImage(img, 0, 0);
    };
    return img.src = e.dataTransfer.getData('text');
  };

}).call(this);

HTMLの実装

実際のHTMLを作成する。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ドラッグ＆ドロップのテスト</title>
<style>
canvas {
	border : solid 1px #000;
}
</style>
</head>
<body>
<h3>ドラッグ画像選択</h3>
<img src="img/apple.jpg" ondragstart="onDragStart(event)" width="100">
<img src="img/orange.jpg" ondragstart="onDragStart(event)" width="100">
<h3>ドロップ先</h3>
<canvas width="420" height="280" id="canv" ondragover="onDropOver(event);" ondrop="onDrop(event)"></canvas>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="js/dd.js"></script>
</body>
</html>