php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="js/hammer.min.js"></script>
</head>
<body>
<div id="wrapper" class="wrapper">
	<div class="statue left"></div>
	<div class="statue right"></div>
	<div class="mirror">
		<div class="front"><img src="images/buddha_front.png" alt=""></div>
	</div>
</div>
<canvas id="myCanvas" width="794" height="612"></canvas>

<style type="text/css" media="screen">
	@charset "UTF-8";
html, body {
  font-size: 14px;
  font-family: '微軟正黑體',sans-serif;
}

body {
  overflow: hidden;
}

a {
  text-decoration: none;
}

* {
  box-sizing: border-box;
}

.wrapper {
  width: 794px;
  height: 612px;
  position: relative;
}

.wrapper .statue {
  width: 100px;
  height: 400px;
  background: url(images/buddha.png);
  position: absolute;
  right: 0;
  bottom: 0;
}

.wrapper .statue.left {
  transform: scaleX(-1);
  left: 0;
  right: auto;
  cursor: pointer;
}

.wrapper .mirror {
  width: 131px;
  height: 429px;
  background: url(images/mirror.png);
  position: absolute;
  left: 50%;
  margin-left: -65.5px;
  top: 20px;
}

.wrapper .mirror .front {
  width: 100%;
  height: 77px;
  text-align: center;
  margin-top: 57px;
}

.wrapper .mirror .front img {
  height: 100%;
  width: auto;
}

#myCanvas {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  pointer-events: none;
}
</style>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var hammer = document.getElementById("wrapper");
var mc = new Hammer(hammer);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright", function(ev) {
    var e = ev;
    e.pageX = ev.center.x;
    moveEvent(e);
});
mc.on("press", function(ev) {
    isPress = true;
});
mc.on("pressup", function(ev) {
    isPress = false;
});

var isPress = false;
$(".statue.left").mousedown(function(e){
	isPress = true;
});
$(window).mouseup(function(){
	isPress = false;
});
$(".wrapper").mousemove(function(e){
	moveEvent(e);
});

function moveEvent(e){
	var mouseX = e.pageX;
	if (isPress && mouseX < (140 + 50) && mouseX > 50){
		var move = mouseX - 50;
		var percentage = (100 * move) / 140;
		$('.statue.left').css('left', move);
		$('.statue.right').css('right', move);
		var scale = (percentage / 100 * 77) + 77;
		var mt = 57 - (percentage / 100) * 37;
		$('.mirror .front').css({
			height: scale,
			marginTop: mt
		});

		var x1 = 400;
		var y1 = 240;
		var x2 = 400;
		var y2 = 430;

		var statue = getPos($(".statue.left"));
		var statue2 = getPos($(".statue.right"));

		ctx.clearRect(0,0,794,612);
    console.log(statue2);
		ctx.strokeStyle = "#FF0000";
		ctx.beginPath();
		ctx.setLineDash([10,15]);
		ctx.moveTo(statue2.x + 20,statue2.y);
		ctx.lineTo(x1,y1);
		ctx.stroke();
		ctx.strokeStyle = "#0000FF";
		ctx.beginPath();
		ctx.moveTo(statue2.x + 20, 612);
		ctx.lineTo(x2,y2);
		ctx.stroke();

		ctx.setLineDash([]);

		drawArrow(ctx, statue.x + 80, statue.y, x1, y1, 30, 20, 1.5, "#FF0000");
		drawArrow(ctx, x1, y1, statue.x + 80, statue.y + 50, 30, 20, 1.5, "#FF0000");
		drawArrow(ctx, x2, y2, statue.x + 80, statue.y + 50, 30, 20, 2, "#0000FF");
		drawArrow(ctx, statue.x + 80, 612, x2, y2, 30, 20, 2, "#0000FF");

		ctx.strokeStyle = "#000000";
		ctx.lineWidth = 2;
		ctx.beginPath();
		ctx.moveTo(350, 240);
		ctx.lineTo(450, 240);
		ctx.moveTo(350, 430);
		ctx.lineTo(450, 430);
		ctx.stroke();

		ctx.closePath();
	}
}

function getPos(tar){
	var result = {};
	result.x = tar.offset().left;
	result.y = tar.offset().top;
	return result;
}

 function drawArrow(ctx, fromX, fromY, toX, toY,theta,headlen,width,color) {
 	theta = typeof(theta) != 'undefined' ? theta : 30;
 	headlen = typeof(theta) != 'undefined' ? headlen : 10;
 	width = typeof(width) != 'undefined' ? width : 1;
 	color = typeof(color) != 'color' ? color : '#000';
 	
    // 计算各角度和对应的P2,P3坐标
    var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
    angle1 = (angle + theta) * Math.PI / 180,
    angle2 = (angle - theta) * Math.PI / 180,
    topX = headlen * Math.cos(angle1),
    topY = headlen * Math.sin(angle1),
    botX = headlen * Math.cos(angle2),
    botY = headlen * Math.sin(angle2);
    
    
    ctx.save();
    ctx.beginPath();
    
    var arrowX = fromX - topX,
    arrowY = fromY - topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.moveTo(fromX, fromY);
    ctx.lineTo(toX, toY);
    arrowX = toX + topX;
    arrowY = toY + topY;
    ctx.moveTo(arrowX, arrowY);
    ctx.lineTo(toX, toY);
    arrowX = toX + botX;
    arrowY = toY + botY;
    ctx.lineTo(arrowX, arrowY);
    ctx.strokeStyle = color;
    ctx.lineWidth = width;
    ctx.stroke();
    ctx.restore();
}
</script>
</body>
</html>