php_group
/
htdoc


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
  <link rel="stylesheet" type="text/css" href="css/flash4.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="info">
    <p class="in">入射角<span></span>度</p> 
    <p class="out">折射角<span></span>度</p> 
  </div>
  <div class="bg">
    <div class="pen"></div>
  </div>
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var isPress = false;
var theta;
var writing = true;
setInterval(function(){
  writing = false;
},5000)

var hammer = document.getElementById("wrapper");
var mc = new Hammer(hammer);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown", function(ev) {
    var e = ev;
    e.pageX = ev.center.x;
    e.pageY = ev.center.y;
    moveEvent(e);
});
mc.on("press", function(ev) {
    isPress = true;
    writing = true;
});
mc.on("pressup", function(ev) {
    isPress = false;
});

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


jQuery.fn.rotate = function(degrees) {
    $(this).css({'transform' : 'rotate('+ degrees +'deg)'});
    return $(this);
};

function moveEvent(e){
  var mouseX = parseInt(e.pageX);
  var mouseY = parseInt(e.pageY);
  var x = parseInt($('.bg').css('left')) + $('.bg').width()/2;
  var y = parseInt($('.bg').css('top')) + $('.bg').height()/2;
  var rot = angle(x,y,mouseX, mouseY);
  if (isPress){
    theta = rot;
    var midAngle = (rot > 180) ? 270:90;
    $('.info .in span').text(Math.abs(midAngle-rot));

    var r = $('.bg').width()/2
    $('.pen').css({
      'left': r*Math.cos(-rot*(Math.PI/180)) + x,
      'top': r*Math.sin(-rot*(Math.PI/180)) + y -10
    });
    $('.pen').rotate(-rot);
    drawing();
  }
}


function angle(x1,y1,x2,y2){
  var x = Math.abs(x1-x2);
  var y = Math.abs(y1-y2);
  var z = Math.sqrt(x*x+y*y);
  var rotat = Math.round((Math.asin(y/z)/Math.PI*180));

  // 第一象限
  if (x2 >= x1 && y2 <= y1) {
      rotat = rotat;
  }
  // 第二象限
  else if (x2 <= x1 && y2 <= y1) {
      rotat = 180 - rotat;
  }
  // 第三象限
  else if (x2 <= x1 && y2 >= y1) {
      rotat = 180 + rotat;
  }
  // 第四象限
  else if(x2 >= x1 && y2 >= y1){
      rotat = 360 - rotat;
  }
  
  return rotat;
}

function drawing(){
  ctx.clearRect(0,0,800,600);
  var x1 = parseInt($('.pen').css('left'));
  var y1 = parseInt($('.pen').css('top')) + 11;
  var midX = parseInt($('.bg').css('left')) + $('.bg').width()/2;
  var midY = parseInt($('.bg').css('top')) + $('.bg').height()/2;
  ctx.strokeStyle = "#FF0000";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(midX, midY);
  ctx.moveTo(midX, midY);
  var n = 1.33;
  var r2 = 250;
  var x2;
  if (theta < 180){
    x2 = Math.sin(Math.abs(90-theta)*(Math.PI/180))/n * r2;
  }else{
    x2 = Math.sin(Math.abs(270-theta)*(Math.PI/180))*n * r2;
  }
  if (theta < 90) x2 = -x2;
  if (theta > 270) x2 = -x2;
  var y2 = Math.sqrt(Math.pow(r2,2)-Math.pow(x2,2));
  var dx = Math.abs(0 - x2);
  var dy = Math.abs(0 - y2);
  var rot2 = Math.round(Math.atan2(dx,dy)/Math.PI*180);

  if (isNaN(rot2) || theta == 0 || theta == 180){
    $('.info .out span').text('');  
  }else{
    $('.info .out span').text(rot2);
  }
  
  var endY;
  if (theta < 180){
    endY = y2+midY;
  }else{
    endY = midY-y2;
  }
  if (theta == 180){
    ctx.lineTo(r2+midX, midY);
  }else if (theta == 0){
    ctx.lineTo(midX-r2, midY);
  }else{
    if (isNaN(rot2)){
      rot2 = 270-theta;
      x2 = r2 * Math.sin(rot2*(Math.PI/180));
      endY = r2 * Math.cos(rot2*(Math.PI/180)) + midY;
    }
    ctx.lineTo(x2+midX, endY);
  }
  ctx.stroke();
  ctx.closePath();
}


</script>
</body>
</html>