Forked from: Akiyah's シールをはがす diff(367)

jQuery Sticker plugin

Akiyah

2011-11-07 22:50:57

License: MIT License

Fork: 0

Fav: 1

View: 713

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 259 lines
HTML 18 lines
CSS 24 lines

Todo
・ドラッグして移動する
・無理な方向にはがせないようにする
・透明なcanvas2がはみ出したせいでbodyにスクロールバーが出るのを避ける
DONE
・ゆっくりもどる方法
・jQueryプラグイン化

jQuery Sticker plugin
jQuery v1.6.2

var canvas2;
(function($){
    $(function() {
	canvas2 = $('<canvas></canvas>');
	var css_option2 = {display: "none",
		       zIndex: 1000,
		       position: "absolute"};
	canvas2.css(css_option2);
	$("body").append(canvas2);
    });
    
    $.fn.sticker = function(){
	//run($("img#sticker"));
	//run($("img#sticker2"));

this.each(function(){
	    run($(this));
        });
        this.each(function(){
	    //console.log($(this).position().left + "," + $(this).position().top);
	    //console.log($(this).offset().left + "," + $(this).offset().top);
            $(this).css("visibility", "hidden");
        });
        return this;
    }
})(jQuery);

var canvas1 = $('<canvas></canvas>');
    $("body").append(canvas1);
    
    var W = img_obj.width();
    var H = img_obj.height();
    var R = Math.ceil(Math.sqrt(W*W+H*H));
    var CENTER = new Point(R+W/2, R+H/2);
    var img_p = img_obj.position();
    //console.log(img_p);
    
    var css_option1 = {top:img_p.top,
		      left:img_p.left,
		      position: "absolute"};
    canvas1.attr({width:W, height:H});
    canvas1.css(css_option1);
    
    var ctx1 = canvas1[0].getContext("2d");
    var ctx2 = canvas2[0].getContext("2d");

var s = null;
    var g;
    //img_obj.hide();
    canvas1.show();
    draw_default(ctx1, ctx2, img_obj);

function mouse_point(e) {
	var dx = e.pageX - img_p.left - W/2;
	var dy = e.pageY - img_p.top  - H/2;
        return new Point(dx, dy);
    }

$("html").mouseup(mouse_up_out);
    //$("body").mouseout(mouse_up_out);
    $("html").mousemove(function(e) {
	if (s === null) {
	    return;
	}
        g = mouse_point(e);
	if (g.same(s)) {
	    return;
	}
	var m = s.plus(g).multi(1/2);
	var d = g.minus(s).normal();
	if (outside(m,d)) {
	    reverse(s, g);
	    s = null;
	    return;
	}
        draw(ctx1, ctx2, s, g, img_obj);
    });
}

jQuery Sticker plugin
QUnit

Todo ・ドラッグして移動する・無理な方向にはがせないようにする・透明なcanvas2がはみ出したせいでbodyにスクロールバーが出るのを避ける DONE ・ゆっくりもどる方法・jQueryプラグイン化 var canvas2; (function($){ $(function() { canvas2 = $('<canvas></canvas>'); var css_option2 = {display: "none", zIndex: 1000, position: "absolute"}; canvas2.css(css_option2); $("body").append(canvas2); }); $.fn.sticker = function(){ //run($("img#sticker")); //run($("img#sticker2")); this.each(function(){ run($(this)); }); this.each(function(){ //console.log($(this).position().left + "," + $(this).position().top); //console.log($(this).offset().left + "," + $(this).offset().top); $(this).css("visibility", "hidden"); }); return this; } })(jQuery); function run(img_obj) { function outside(m, d) { var s0 = (d.x*( W/2 - m.x) + d.y*( H/2 - m.y) > 0); var s1 = (d.x*(-W/2 - m.x) + d.y*( H/2 - m.y) > 0); var s2 = (d.x*( W/2 - m.x) + d.y*(-H/2 - m.y) > 0); var s3 = (d.x*(-W/2 - m.x) + d.y*(-H/2 - m.y) > 0); return (s0 && s1 && s2 && s3) || (!s0 && !s1 && !s2 && !s3); } function draw_mask(ctx, m, d, c) { var n = new Point(d.y, -d.x); ctx.setTransform(1,0,0,1,0,0); ctx.translate(c.x, c.y); ctx.translate(m.x, m.y); ctx.beginPath(); var p; p = n.multi(R); ctx.moveTo(p.x, p.y); p = n.multi(-R); ctx.lineTo(p.x, p.y); p = n.multi(-R).plus(d.multi(R)); ctx.lineTo(p.x, p.y); p = n.multi(R).plus(d.multi(R)); ctx.lineTo(p.x, p.y); ctx.closePath(); ctx.fill(); ctx.setTransform(1,0,0,1,0,0); } function draw_rect(ctx, img_obj) { ctx.drawImage(img_obj[0], -W/2, -H/2); } function draw_default(ctx1, ctx2, img_obj) { ctx1.clearRect(0, 0, W, H); ctx2.clearRect(0, 0, 2*R+W, 2*R+H); ctx1.globalCompositeOperation = 'source-over'; ctx1.setTransform(1,0,0,1,0,0); ctx1.translate(W/2, H/2); draw_rect(ctx1, img_obj); ctx1.setTransform(1,0,0,1,0,0); } function draw(ctx1, ctx2, s, g, img_obj) { ctx1.clearRect(0, 0, W, H); ctx2.clearRect(0, 0, 2*R+W, 2*R+H); // omote ctx1.globalCompositeOperation = 'source-over'; ctx1.setTransform(1,0,0,1,0,0); ctx1.translate(W/2, H/2); draw_rect(ctx1, img_obj); ctx1.setTransform(1,0,0,1,0,0); var m = s.plus(g).multi(1/2); var d = s.minus(g).normal(); ctx2.setTransform(1,0,0,1,0,0); ctx2.translate(CENTER.x, CENTER.y); ctx2.translate(m.x, m.y); ctx2.transform(d.x, d.y, -d.y, d.x, 0,0);//回転 ctx2.transform(-1,0, 0,1, 0,0); ctx2.transform(d.x, -d.y, d.y, d.x, 0,0);//回転 ctx2.translate(-m.x, -m.y); // ura ctx2.globalCompositeOperation = 'source-over'; draw_rect(ctx2, img_obj); // 2 // ura gray ctx2.globalCompositeOperation = 'source-atop'; ctx2.fillStyle = 'rgba(240, 240, 240, 0.595)'; ctx2.fillRect(-W/2, -H/2, W, H); // 2 // mask ctx2.setTransform(1,0,0,1,0,0); ctx1.globalCompositeOperation = 'destination-out'; ctx1.fillStyle = 'rgb(255, 255, 255)'; draw_mask(ctx1, m, d, new Point(W/2, H/2)); //draw_mask(ctx1, m, d, CENTER); ctx2.globalCompositeOperation = 'destination-out'; ctx2.fillStyle = 'rgb(255, 255, 255)'; draw_mask(ctx2, m, d, CENTER); // 2 } var canvas1 = $('<canvas></canvas>'); $("body").append(canvas1); var W = img_obj.width(); var H = img_obj.height(); var R = Math.ceil(Math.sqrt(W*W+H*H)); var CENTER = new Point(R+W/2, R+H/2); var img_p = img_obj.position(); //console.log(img_p); var css_option1 = {top:img_p.top, left:img_p.left, position: "absolute"}; canvas1.attr({width:W, height:H}); canvas1.css(css_option1); var ctx1 = canvas1[0].getContext("2d"); var ctx2 = canvas2[0].getContext("2d"); var s = null; var g; //img_obj.hide(); canvas1.show(); draw_default(ctx1, ctx2, img_obj); function mouse_point(e) { var dx = e.pageX - img_p.left - W/2; var dy = e.pageY - img_p.top - H/2; return new Point(dx, dy); } function border_point(p) { if (p.x === 0) { if (p.y === 0) { return new Point(W/2, H/2); } else { return new Point(0, H*((p.y > 0) - 0.5)); } } if (Math.abs(p.y)/H > Math.abs(p.x)/W) { var y = H*((p.y > 0) - 0.5); return new Point(p.x/p.y*y, y); } else { var x = W*((p.x > 0) - 0.5); return new Point(x, p.y/p.x*x); } } canvas1.mousedown(function(e) { var css_option2 = {top:img_p.top-R, left:img_p.left-R}; canvas2.attr({width:2*R+W, height:2*R+H}); canvas2.css(css_option2); canvas2.show(); mp = mouse_point(e); s = border_point(mp); g = s; }); function reverse(s, g) { if (g.same(s)) { canvas2.hide(); draw_default(ctx1, ctx2, img_obj); return; } var ss = new Point(s.x, s.y); var gg = new Point(g.x, g.y); function reverse_one() { var d = gg.minus(ss); if (d.distance() > 10) { gg = gg.minus(d.normal().multi(10)); draw(ctx1, ctx2, ss, gg, img_obj); setTimeout(reverse_one, 10); } else { canvas2.hide(); draw_default(ctx1, ctx2, img_obj); } } setTimeout(reverse_one, 10); } function mouse_up_out(e) { if (s === null) { return; } reverse(s, g); s = null; } $("html").mouseup(mouse_up_out); //$("body").mouseout(mouse_up_out); $("html").mousemove(function(e) { if (s === null) { return; } g = mouse_point(e); if (g.same(s)) { return; } var m = s.plus(g).multi(1/2); var d = g.minus(s).normal(); if (outside(m,d)) { reverse(s, g); s = null; return; } draw(ctx1, ctx2, s, g, img_obj); }); } function Point(x, y) { this.x = x; this.y = y; this.plus = function(o) { return new Point(this.x + o.x, this.y + o.y); }; this.multi = function(a) { return new Point(this.x * a, this.y * a); }; this.minus = function(o) { return this.plus(o.multi(-1)); }; this.normal = function() { return this.multi(1/this.distance()); }; this.distance = function() { return Math.sqrt(this.x*this.x+this.y*this.y); }; this.same = function(o) { return this.minus(o).same0(); }; this.same0 = function() { return ((this.x === 0) && (this.y === 0)); }; this.to_s = function() { return "(" + this.x + ", " + this.y + ")"; }; } <img id="sticker1" class="sticker" src="http://dl.dropbox.com/u/227796/sticker/sticker3.png" /> <img id="sticker2" class="sticker" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png" /> <br/> <br/> <br/> <br/> <br/> <img class="sticker" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png" /> <br/> <br/> <br/> <img class="sticker" src="http://www.w3.org/html/logo/downloads/HTML5_Badge_128.png" /> <script type="text/javascript"> window.onload=function() {$("img.sticker").sticker();}; </script> body { background-color: #DDDDDD; font: 30px sans-serif; background: url(http://dl.dropbox.com/u/227796/sticker/paper.png); } canvas { //-webkit-box-shadow: 0px 0px 10px #000; } img#sticker1 { border: solid 0px red; //position: absolute; //top: 200px; //left: 250px; } img#sticker2 { border: solid 0px red; //position: absolute; //top: 50px; //left: 100px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/vvXb/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/Akiyah/sticker" title="jQuery Sticker plugin">jQuery Sticker plugin - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code