php_group
/
htdoc


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
							<!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="wrapper2" class="wrapper2">
    <div class="bg"></div>
    <div class="candle drag"></div>
    <div class="candle reverse"></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("wrapper2");
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;
});
$(".wrapper2").mousemove(function(e){
	moveEvent(e);
});

function moveEvent(e){
	var mouseX = e.pageX;
	if (isPress && mouseX < 200 && mouseX > 20){
    var top = lineFormula(mouseX);
		$(".candle.drag").css({
      "left":mouseX,
      "top": top
    });
		var move = mouseX - 82;
		var p = 400 - mouseX;
		var f = 145;
		var q = (f * p) / (p - f);
		reverse_scale = Math.abs(-q/p);
    var top2 = lineFormula(400+q+34);
		$(".candle.reverse").css({
      "left": 400+q+34,
      "top": top2
    });
		if(p > 145){
			$(".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 lineFormula(x){
  return -0.515*x+506 - 70;
}

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;

  ctx.strokeStyle = "#0000FF";
  ctx.lineWidth = 3;
  ctx.beginPath();
  ctx.moveTo(x1, y1);
  ctx.lineTo(400, 240);
  ctx.moveTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.moveTo(400, 240);
  ctx.lineTo(x2, y2);
  ctx.stroke();
  ctx.closePath();
}

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