vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-05 03:33:23 +01:00
Code Issues Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
peteruithoven 2014-01-10 13:59:55 +01:00
parent 0ad800b021
commit a4ad7d7198
5 changed files with 87 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -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',

76
js/AddShapeDialog.js Normal file
View File

@ -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
View File

@ -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();

8
less/popup.less
View File

@ -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 {

12
www/index.html
View File

@ -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>