yeungalan
/
Paint


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190
							<html>
<head>
<!-- Tocas UI：CSS 與元件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.css">
<!-- Tocas JS：模塊與 JavaScript 函式 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocas-ui/2.3.3/tocas.js"></script>
<script src="../script/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pressure/2.1.2/jquery.pressure.min.js"></script>
<script src="../script/ao_module.js"></script>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
</head>
<body>
<div class="ts menu" style="position: absolute;width: 100vw;z-index: 2;">
    <a class="item" onclick="save();">Save</a>
    <a class="item" onclick="importimg();">Import</a>
	<a class="item" id="mode" onclick="chgmode()">Normal</a>
</div>

<canvas id="paintArea" width="100" height="100"></canvas>

<div style="position: fixed;bottom: 0;right: 0;">
	<div style="bottom: 5px;right: 5px;display: block;float: left;" id="colorselector">
		<div class="ts slider" style="margin-right: 10px;float: right;">
			<input id="width" type="range">
		</div>
	</div>
</div>
<div class="ts bottom right snackbar">
		<div class="content"></div>
	</div>
</body>
<script type="text/javascript">
var canvas = document.getElementById("paintArea");
var ctx = canvas.getContext('2d');
var clicking = false;

var width = 0;
ts('.ts.slider').slider();

var currHeight = window.innerWidth;
var currWidth = window.innerHeight;
$("#paintArea")[0].width = window.innerWidth;
$("#paintArea")[0].height = window.innerHeight;

var color = ['#ff0000', '#ff8c00', '#fff600', '#00ff6e', '#00ffae', '#3b00ff', '#ae00ff', '#000000'];
color.forEach(function(element) {
  $("#colorselector").prepend('<div class="cp" style="background-color: ' + element + ';width: 30px;height: 30px;border-radius: 50%;float: right;margin-right: 4px;" data-color="' + element + '" onclick="chgcolor(this)"></div>');
});
$( ".cp[data-color~='#000000']" ).html('<i style="margin-left: 24%;margin-top: 24%;" class="checkmark icon"></i>');
function chgcolor(element){
	ctx.strokeStyle = $(element).attr("data-color");
	$(".cp").html("");
	$(element).html('<i style="margin-left: 24%;margin-top: 24%;" class="checkmark icon"></i>');
}

var pmode = false;
function chgmode(){
	if(pmode){
		pmode = false;
		$("#mode").html("Normal");
	}else{
		pmode = true;
		$("#mode").html("Pressure");
	}
}
$('#paintArea').pressure({
  change: function(f, event){
		if(pmode){
			width = f * 10;
			$("#width").attr("style","background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop(" + width/10 + ", rgb(150, 150, 150)), color-stop(" + width/10 + ", rgb(233, 233, 233)));");
			$("#width").val(width * 10);
			console.log(width);
		}
  },
});


$(window).on('resize', function () {
	var currImg = ctx.getImageData(0, 0, currWidth, currHeight);	
	currWidth = window.innerWidth;
	currHeight = window.innerHeight;		
	$("#paintArea")[0].width = window.innerWidth;
	$("#paintArea")[0].height = window.innerHeight;
	ctx.putImageData(currImg, 0, 0);
});

var prevX = 0;
var prevY = 0;
$( "#paintArea" ).on('mousedown touchstart',function(e) {
    console.log(e.pageX, e.pageY);
	clicking = true;
	if(!pmode){
		ctx.beginPath();
		ctx.moveTo(e.pageX,e.pageY);
	}
	prevX = e.pageX;
	prevY = e.pageY;
});

$( "#paintArea" ).on('mousemove touchmove',function(e) {
	if(clicking){
		if(pmode){
			ctx.beginPath();
			ctx.moveTo(prevX,prevY);
		}
		ctx.lineWidth = width;
		console.log(e.pageX, e.pageY);
		ctx.lineTo(e.pageX,e.pageY);
		ctx.stroke();
		
		prevX = e.pageX;
		prevY = e.pageY;
	}
});

$( "#paintArea" ).on('mouseup touchend',function(e) {
	clicking = false;
});

$("#width").on('change', function () {
	width = $("#width").val() / 10;
});

function save(){
	if (ao_module_virtualDesktop){
		ao_module_openFileSelector(Math.round(Math.random()*100,0),"setPathBySelector",undefined,undefined,false,"folder");
	}else{
		ao_module_openFileSelectorTab(Math.round(Math.random()*100,0),"../",false,"folder",setPathBySelector);
	}
}

function importimg(){
	if (ao_module_virtualDesktop){
		ao_module_openFileSelector(Math.round(Math.random()*100,0),"importselector",undefined,undefined,false,"file");
	}else{
		ao_module_openFileSelectorTab(Math.round(Math.random()*100,0),"../",false,"file",importselector);
	}	
}

function importselector(object){
	var files = JSON.parse(object);
	console.log(files);
	var img = new Image();
	img.onload = function() {
		var ctx = document.getElementById('paintArea').getContext('2d');
		ctx.drawImage(img, 0, 0);
		msgbox("Imported /AOR/" + files[0].filepath);
	}
	img.src = "../" + files[0].filepath;
}

function setPathBySelector(object){
	var files = JSON.parse(object);
	console.log(files);
	$.post("save.php", { b64: $("#paintArea")[0].toDataURL('image/png'), path: files[0].filepath},
	   function(data){
		 msgbox("Saved as " + data);
   });
}

function msgbox(content){
	ts('.snackbar').snackbar({
		content: content,
		onAction: () => {
			$(".snackbar").removeAttr("style");
		}
	});
}

  function preventPullToRefresh(element) {
    var prevent = false;

    document.querySelector(element).addEventListener('touchstart', function(e){
      if (e.touches.length !== 1) { return; }

      var scrollY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
      prevent = (scrollY === 0);
    });

    document.querySelector(element).addEventListener('touchmove', function(e){
      if (prevent) {
        prevent = false;
        e.preventDefault();
      }
    });
  }

  preventPullToRefresh('#paintArea') // pass #id or html tag into the method
</script>
</html>