|
|
@@ -0,0 +1,190 @@
|
|
|
+<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>
|
