canvas内にレンダリングされた画像を移動させるにはどうすればいいのだろうか？
jsdo.itのcanvasで表示した画像を移動する（translate）
にやり方が書いてあって、これをclass化させて、もっと汎用的に使えたならと考えて下のようなプラグイン的なものを作ってみた。
class MoveImage
constructor: (options) ->
defaults = {
baseSelector:''
img:''
}
@settings = {}
for k of defaults
@settings[k] = defaults[k]
for k of options
@settings[k] = options[k]
@_init()
return @
_init:()->
if @settings.baseSelector is '' or typeof @settings.baseSelector is 'undefined' or @settings.baseSelector is null
return
if @settings.img is '' or typeof @settings.img is 'undefined' or @settings.img is null
return
if not @settings.img instanceof Image
return
@img = @settings.img
@canvas = document.querySelector @settings.baseSelector
moveX:(dx)->
@_move dx,0
moveY:(dy)->
@_move 0,dy
move:(dx,dy)->
@_move dx,dy
_move:(dx,dy)->
ctx = @canvas.getContext '2d'
ctx.clearRect 0, 0, @canvas.width, @canvas.height
ctx.translate dx, dy
ctx.drawImage @img, 0, 0
ctx.translate -1*dx , -1*dy
コンパイルした結果は// Generated by CoffeeScript 1.8.0
var MoveImage;
MoveImage = (function() {
function MoveImage(options) {
var defaults, k;
defaults = {
baseSelector: '',
img: ''
};
this.settings = {};
for (k in defaults) {
this.settings[k] = defaults[k];
}
for (k in options) {
this.settings[k] = options[k];
}
this._init();
return this;
}
MoveImage.prototype._init = function() {
if (this.settings.baseSelector === '' || typeof this.settings.baseSelector === 'undefined' || this.settings.baseSelector === null) {
return;
}
if (this.settings.img === '' || typeof this.settings.img === 'undefined' || this.settings.img === null) {
return;
}
if (!this.settings.img instanceof Image) {
return;
}
this.img = this.settings.img;
return this.canvas = document.querySelector(this.settings.baseSelector);
};
MoveImage.prototype.moveX = function(dx) {
return this._move(dx, 0);
};
MoveImage.prototype.moveY = function(dy) {
return this._move(0, dy);
};
MoveImage.prototype.move = function(dx, dy) {
return this._move(dx, dy);
};
MoveImage.prototype._move = function(dx, dy) {
var ctx;
ctx = this.canvas.getContext('2d');
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
ctx.translate(dx, dy);
ctx.drawImage(this.img, 0, 0);
return ctx.translate(-1 * dx, -1 * dy);
};
return MoveImage;
})();使い方は下のように使えばおｋ<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body{
margin:0;
}
</style>
</head>
<body>
<canvas class="_canvas"></canvas>
<p><input type="file" class="_file"></p>
<p><input type="text" value="0" name="dx">X座標</p>
<p><input type="text" value="0" name="dy">Y座標</p>
<p><input type="button" value="移動"></p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="./moveImage.1.0.0.js"></script>
<script>
jQuery(function(){
var moveImage;
$('input[type="button"]').on('click',function(){
moveImage.move($('input[name="dx"]').val(),$('input[name="dy"]').val())
});
$('._file').on('change',function(e){
var currentTarget = e.currentTarget;
var $currentTarget = $(currentTarget);
var file = currentTarget.files[0];
var dataUrl = URL.createObjectURL(file);
var image = new Image();
image.onload = function(){
var $canvas = $('._canvas');
var canvas = $canvas[0];
var width = image.width;
var height = image.height;
canvas.width = height;
canvas.height = width;
var ctx = canvas.getContext('2d');
ctx.drawImage(image , 0, 0);
moveImage = new MoveImage({
baseSelector:'._canvas',
img:image
});
};
image.src = dataUrl;
});
});
</script>
</body>
</html>
0 コメント:
コメントを投稿