Cleanup
This commit is contained in:
peteruithoven
parent
0ad800b021
commit
a4ad7d7198
|
|
@ -23,6 +23,7 @@ module.exports = function(grunt) {
|
|||
'js/btnMove.js',
|
||||
'js/WordArt.js',
|
||||
'js/Shape.js',
|
||||
'js/AddShapeDialog.js',
|
||||
'js/Svg.js',
|
||||
'js/Keyboard.js',
|
||||
'js/SettingsWindow.js',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
var shapeResolution=3;
|
||||
|
||||
function initShapeDialog() {
|
||||
$("#btnShapeOk").on("onButtonClick",onShapeOk);
|
||||
$("#btnShapeCancel").on("onButtonClick",onShapeCancel);
|
||||
$("#btnShapePlus").on("onButtonHold",onShapePlus);
|
||||
$("#btnShapeMin").on("onButtonHold",onShapeMin);
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function showShapeDialog() {
|
||||
showPopup(popupShape);
|
||||
}
|
||||
|
||||
function onShapeCancel() {
|
||||
hidePopup(popupShape);
|
||||
}
|
||||
|
||||
function onShapeOk() {
|
||||
hidePopup(popupShape);
|
||||
|
||||
var res = shapeResolution;
|
||||
|
||||
if (res!=undefined) {
|
||||
if (isNaN(res)) res=3;
|
||||
if (res<2) res=2;
|
||||
if (res>100) res=100;
|
||||
drawCircle(canvasWidth/2,canvasHeight/2,80,res);
|
||||
}
|
||||
}
|
||||
|
||||
function onShapePlus() {
|
||||
shapeResolution++;
|
||||
if (shapeResolution>50) shapeResolution=50;
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function onShapeMin() {
|
||||
shapeResolution--;
|
||||
if (shapeResolution<2) shapeResolution=2;
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function updateShapePreview() {
|
||||
$(".lblShapeResolution").text(shapeResolution + " sides");
|
||||
|
||||
var canvas = $("#shapePreview")[0];
|
||||
var c = canvas.getContext('2d');
|
||||
var w = canvas.width;
|
||||
var h = canvas.height;
|
||||
console.log(w,h);
|
||||
var r = w/2 - 20;
|
||||
var x0 = w/2;
|
||||
var y0 = h/2;
|
||||
var res = shapeResolution;
|
||||
var step = Math.PI * 2.0 / res;
|
||||
|
||||
c.save();
|
||||
c.clearRect(0,0,canvas.width, canvas.height);
|
||||
c.restore();
|
||||
c.beginPath();
|
||||
for (var a=0; a<Math.PI*2; a+=step) {
|
||||
var x = Math.sin(a+Math.PI) * r + x0;
|
||||
var y = Math.cos(a+Math.PI) * r + y0;
|
||||
if (a==0) c.moveTo(x,y);
|
||||
else c.lineTo(x,y);
|
||||
}
|
||||
//close shape
|
||||
var x = Math.sin(0+Math.PI) * r + x0;
|
||||
var y = Math.cos(0+Math.PI) * r + y0;
|
||||
c.lineTo(x,y);
|
||||
|
||||
//draw shape
|
||||
c.lineWidth = 2;
|
||||
c.stroke();
|
||||
}
|
||||
77
js/Shape.js
77
js/Shape.js
|
|
@ -1,80 +1,3 @@
|
|||
var shapeResolution=3;
|
||||
|
||||
function initShapeDialog() {
|
||||
$(".btnShapeOk").on("onButtonClick",onShapeOk);
|
||||
$(".btnShapeCancel").on("onButtonClick",onShapeCancel);
|
||||
$(".btnShapePlus").on("onButtonHold",onShapePlus);
|
||||
$(".btnShapeMin").on("onButtonHold",onShapeMin);
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function showShapeDialog() {
|
||||
showPopup(popupShape);
|
||||
}
|
||||
|
||||
function onShapeCancel() {
|
||||
hidePopup(popupShape);
|
||||
}
|
||||
|
||||
function onShapeOk() {
|
||||
hidePopup(popupShape);
|
||||
|
||||
var res = shapeResolution;
|
||||
|
||||
if (res!=undefined) {
|
||||
if (isNaN(res)) res=3;
|
||||
if (res<2) res=2;
|
||||
if (res>100) res=100;
|
||||
drawCircle(canvasWidth/2,canvasHeight/2,80,res);
|
||||
}
|
||||
}
|
||||
|
||||
function onShapePlus() {
|
||||
shapeResolution++;
|
||||
if (shapeResolution>50) shapeResolution=50;
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function onShapeMin() {
|
||||
shapeResolution--;
|
||||
if (shapeResolution<2) shapeResolution=2;
|
||||
updateShapePreview();
|
||||
}
|
||||
|
||||
function updateShapePreview() {
|
||||
$(".lblShapeResolution").text(shapeResolution + " sides");
|
||||
|
||||
var canvas = $(".shapePreview")[0];
|
||||
var c = canvas.getContext('2d');
|
||||
var w = canvas.width;
|
||||
var h = canvas.height;
|
||||
console.log(w,h);
|
||||
var r = w/2 - 20;
|
||||
var x0 = w/2;
|
||||
var y0 = h/2;
|
||||
var res = shapeResolution;
|
||||
var step = Math.PI * 2.0 / res;
|
||||
|
||||
c.save();
|
||||
c.clearRect(0,0,canvas.width, canvas.height);
|
||||
c.restore();
|
||||
c.beginPath();
|
||||
for (var a=0; a<Math.PI*2; a+=step) {
|
||||
var x = Math.sin(a+Math.PI) * r + x0;
|
||||
var y = Math.cos(a+Math.PI) * r + y0;
|
||||
if (a==0) c.moveTo(x,y);
|
||||
else c.lineTo(x,y);
|
||||
}
|
||||
//close shape
|
||||
var x = Math.sin(0+Math.PI) * r + x0;
|
||||
var y = Math.cos(0+Math.PI) * r + y0;
|
||||
c.lineTo(x,y);
|
||||
|
||||
//draw shape
|
||||
c.lineWidth = 2;
|
||||
c.stroke();
|
||||
}
|
||||
|
||||
function drawCircle(x0,y0,r,res) {
|
||||
if (res==undefined) res = 50; //circle resolution
|
||||
beginShape();
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
// @popup-width: 60%;
|
||||
|
||||
.popupMask {
|
||||
#popupMask {
|
||||
background-color: rgba(255, 255, 255, 0.65);
|
||||
// z-index: 20;
|
||||
// border: 10px solid red;
|
||||
|
|
@ -52,7 +52,7 @@
|
|||
// border: 2px solid black;
|
||||
}
|
||||
|
||||
.shapePreview {
|
||||
#shapePreview {
|
||||
// width: 150px;
|
||||
// height: 150px;
|
||||
border: 1px solid black;
|
||||
|
|
@ -63,10 +63,10 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.btnShapeOk {
|
||||
float: right;
|
||||
#btnShapeOk {
|
||||
position: absolute;
|
||||
bottom: 5%;
|
||||
right: 3%;
|
||||
}
|
||||
|
||||
.columnRight {
|
||||
|
|
|
|||
|
|
@ -125,7 +125,7 @@
|
|||
|
||||
<div id="debug_display"></div>
|
||||
|
||||
<div class="popupMask"></div>
|
||||
<div id="popupMask"></div>
|
||||
|
||||
<div class="popup popupWordArt">
|
||||
<div class="content">
|
||||
|
|
@ -140,12 +140,12 @@
|
|||
<div class="content">
|
||||
<h1>Add a new shape</h1>
|
||||
<div class="columnRight">
|
||||
<img class="btn btnShapeMin" src="img/buttons/btnMin.png" />
|
||||
<img class="btn btnShapePlus" src="img/buttons/btnPlus.png" />
|
||||
<img class="btn btnShapeOk" src="img/buttons/btnOk.png">
|
||||
<img class="btn" id="btnShapeMin" src="img/buttons/btnMin.png" />
|
||||
<img class="btn" id="btnShapePlus" src="img/buttons/btnPlus.png" />
|
||||
<img class="btn" id="btnShapeOk" src="img/buttons/btnOk.png">
|
||||
</div>
|
||||
<canvas class="shapePreview" width="150" height="150"></canvas><br/>
|
||||
<div class="lblShapeResolution"></div>
|
||||
<canvas id="shapePreview" width="150" height="150"></canvas><br/>
|
||||
<div id="lblShapeResolution"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue