php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!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/flash5.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="bg"></div>
	<div class="candle drag"></div>
	<div class="candle reverse"></div>
	<!-- <div class="candle empty"></div> -->
</div>
<canvas id="myCanvas" width="800" height="600"></canvas>

<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.strokeStyle = "#0000FF";
var reverse_scale = 1;

var isPress = false;

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

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

function moveEvent(e){
	var mouseX = e.pageX;
	if (isPress && mouseX < 360 && mouseX > 20){
		$(".candle.drag").css("left",mouseX);
		var move = mouseX - 100;
		var p = 400 - mouseX;
		var f = 150;
		var q = (f * p) / (p - f);
		reverse_scale = Math.abs(-q/p);
		$(".candle.reverse").css("left", 400+q);
		if(p > 150){
			$(".candle.reverse").css("transform", "scale(-"+reverse_scale+")");
			$(".candle.reverse").removeClass('opacity');
		}else{
			$(".candle.reverse").css("transform", "scale("+reverse_scale+")");
			$(".candle.reverse").addClass('opacity');
		}
		drawing();
	}
}

function drawing(){
  ctx.clearRect(0,0,800,600);
  var x1 = parseInt($(".candle.drag").css('left'));
  var y1 = parseInt($(".candle.drag").css('top')) + 25;

  var a = (300-y1)/(400-x1);
  var b = 300 - (400*((300-y1)/(400-x1)));
  var x2 = parseInt($(".candle.reverse").css('left'));
  var y2 = a*x2+b;

  var x3 = parseInt($(".candle.reverse").css('left'));
  var y3 = 300 - (($(".candle.reverse").height() - 25) * reverse_scale);

  var unlimitedX = 1000;
  var unlimitedY = a*unlimitedX+b;
  var unlimitedY2 = 0.3 * unlimitedX + 135;
 

  var f_line_x = x3;
  var f_line_y = 0.3 * f_line_x + 135;
  ctx.strokeStyle = "#0000FF";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(400, y1);
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.moveTo(400, y1);
  ctx.lineTo(f_line_x, f_line_y);
  ctx.stroke();
  ctx.closePath();
  if (x1 > 250){
  	ctx.strokeStyle = "#0000FF";
  	ctx.beginPath();
  	ctx.moveTo(400, 300);
  	ctx.lineTo(unlimitedX, unlimitedY);
  	ctx.moveTo(400, y1);
  	ctx.lineTo(unlimitedX, unlimitedY2);
  	ctx.stroke();
  	ctx.closePath();

  	ctx.strokeStyle = "#FF0000";
  	ctx.beginPath();
  	ctx.moveTo(400, y1);
  	ctx.lineTo(x3, y3);
  	ctx.moveTo(400, 300);
  	ctx.lineTo(x3, y3);
  	ctx.stroke();
  }
  ctx.closePath();
}

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