php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
							<!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="arrow"></div>
	<div class="mirror">
    <div class="mirror_content">
      <div class="front"><img src="images/buddha_front.png" alt=""></div>
    </div>
	</div>
  <div class="mirrow_down"></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;
}
.arrow{
  width: 71px;
  height: 200px;
  background: url(images/arrow.png);
  position: absolute;
  left: 450px;
  top: 250px;
}

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

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

.wrapper .statue.left {
  transform: scaleX(-1);
  left: 100px;
  right: auto;
  cursor: default;
}

.wrapper .mirror {
  width: 131px;
  height: 195px;
  background: url(images/mirrow_up.png);
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -65.5px;
  top: 20px;
  overflow: hidden;
}
.wrapper .mirror .mirror_content{
  width: 110px;
  height: 90%;
  position: absolute;
  left: 50%;
  margin-left: -55px;
  top: 5%;
  overflow: hidden;
}
.wrapper .mirrow_down {
  width: 9px;
  height: 195px;
  background: url(images/mirrow_down.png);
  background-size: 100% 100%;
  position: absolute;
  left: 50%;
  margin-left: -4.5px;
  top: 215px;
  cursor: pointer;
}

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

.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("panup pandown", function(ev) {
    var e = ev;
    e.pageY = ev.center.y;
    moveEvent(e);
});
mc.on("press", function(ev) {
    isPress = true;
});
mc.on("pressup", function(ev) {
    isPress = false;
});

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

function moveEvent(e){
	var mouseY = e.pageY;
	if (isPress && mouseY < 410 && mouseY > 320){
    if($('.arrow').length > 0) $('.arrow').remove();
		var height = mouseY - 215;
		$('.mirrow_down').css('height', height);
		$('.mirror').css({
			height: height,
		});

		var x1 = 400;
		var y1 = 225;
		var x2 = 400;
		var y2 = mouseY - 10;

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

		ctx.clearRect(0,0,794,612);

		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, height*2 + 150);
		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, height*2 + 150, x2, y2, 30, 20, 2, "#0000FF");

		ctx.strokeStyle = "#000000";
		ctx.lineWidth = 2;
		ctx.beginPath();
		ctx.moveTo(350, y1);
		ctx.lineTo(450, y1);
		ctx.moveTo(350, y2);
		ctx.lineTo(450, y2);
		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>