You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
176 lines
6.2 KiB
176 lines
6.2 KiB
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<style type="text/css">
|
|
body{
|
|
margin: 8px;
|
|
background: gray;
|
|
}
|
|
|
|
#menu{
|
|
width: 100px;
|
|
margin-top: 28px;
|
|
text-align: center;
|
|
}
|
|
|
|
#board{
|
|
cursor: crosshair;
|
|
border: 1px solid black;
|
|
background: white;
|
|
}
|
|
|
|
div.pixel{
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
}
|
|
div.pixel:hover{
|
|
opacity: .5;
|
|
}
|
|
</style>
|
|
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
|
|
<script src="js/filesaver.js"></script>
|
|
<script type="text/javascript">
|
|
|
|
var decodeBase64 = function(s) {
|
|
var e={},i,b=0,c,x,l=0,a,r='',w=String.fromCharCode,L=s.length;
|
|
var A="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
|
|
for(i=0;i<64;i++){e[A.charAt(i)]=i;}
|
|
for(x=0;x<L;x++){
|
|
c=e[s.charAt(x)];b=(b<<6)+c;l+=6;
|
|
while(l>=8){((a=(b>>>(l-=8))&0xff)||(x<(L-2)))&&(r+=w(a));}
|
|
}
|
|
return r;
|
|
};
|
|
var app = angular.module("myApp", []);
|
|
|
|
app.directive('appFilereader', function($q) {
|
|
var slice = Array.prototype.slice;
|
|
|
|
return {
|
|
restrict: 'A',
|
|
require: '?ngModel',
|
|
link: function(scope, element, attrs, ngModel) {
|
|
if (!ngModel) return;
|
|
|
|
ngModel.$render = function() {};
|
|
|
|
element.bind('change', function(e) {
|
|
var element = e.target;
|
|
|
|
$q.all(slice.call(element.files, 0).map(readFile))
|
|
.then(function(values) {
|
|
if (element.multiple) ngModel.$setViewValue(values);
|
|
else ngModel.$setViewValue(values.length ? values[0] : null);
|
|
});
|
|
|
|
function readFile(file) {
|
|
var deferred = $q.defer();
|
|
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
deferred.resolve(e.target.result);
|
|
};
|
|
reader.onerror = function(e) {
|
|
deferred.reject(e);
|
|
};
|
|
reader.readAsDataURL(file);
|
|
|
|
return deferred.promise;
|
|
}
|
|
|
|
}); //change
|
|
|
|
} //link
|
|
}; //return
|
|
})
|
|
|
|
app.controller("myCtrl", function($scope,$interval) {
|
|
$scope.size = 1;
|
|
$scope.pixels= [];
|
|
$scope.click = false;
|
|
$scope.color = "#000";
|
|
$scope.mouse = {
|
|
x: 0,
|
|
y: 0
|
|
}
|
|
|
|
var board = document.getElementById("board");
|
|
$(board).css({width:'200px', height:'200px'});
|
|
|
|
var ctx = board.getContext("2d");
|
|
var max = { x: board.width, y: board.height};
|
|
|
|
|
|
var id = 1;
|
|
for(var i = 0; i<max.y; i++){
|
|
for(var j = 0; j<max.x; j++){
|
|
$scope.pixels.push({id: id,position:{x: j, y: i}, color: '#fff'});
|
|
id++;
|
|
}
|
|
}
|
|
|
|
var painter = {
|
|
draw: function(pixel) {
|
|
if (board.getContext) {
|
|
angular.forEach($scope.pixels, function(value, key) {
|
|
ctx.fillStyle = pixel.color;
|
|
ctx.fillRect(pixel.position.x, pixel.position.y, $scope.size, $scope.size);
|
|
});
|
|
}
|
|
},
|
|
update: function(){
|
|
angular.forEach($scope.pixels, function(value, key) {
|
|
value.color = 'black';
|
|
console.log(22);
|
|
});
|
|
},
|
|
clear: function() {
|
|
if (board.getContext) {
|
|
ctx.clearRect(0,0, board.width, board.height);
|
|
}
|
|
}
|
|
};
|
|
|
|
/* $interval(function(){
|
|
angular.forEach($scope.pixels, function(value, key) {
|
|
squareDrawer.clear();
|
|
squareDrawer.draw(value);
|
|
});
|
|
}, 1000);*/
|
|
|
|
board.onmousedown = function(e) {
|
|
painter.update();
|
|
painter.draw();
|
|
}
|
|
|
|
board.onmousemove = function(e) {
|
|
var rect = this.getBoundingClientRect();
|
|
|
|
$scope.mouse = {
|
|
x : e.clientX - rect.left,
|
|
y : e.clientY - rect.top
|
|
}
|
|
|
|
//ctx.clearRect(0, 0, board.width, board.height); // for demo
|
|
|
|
/*
|
|
while(r = $scope.pixels[i++]) {
|
|
// add a single rect to path:
|
|
ctx.beginPath();
|
|
ctx.rect(r.position.x, r.position.y, $scope.size, $scope.size);
|
|
|
|
// check if we hover it, fill red, if not fill it blue
|
|
ctx.fillStyle = ctx.isPointInPath(x, y) ? "red" : "blue";
|
|
ctx.fill();
|
|
}
|
|
*/
|
|
|
|
};
|
|
});
|
|
</script>
|
|
</head>
|
|
<body ng-controller="myCtrl">
|
|
<canvas id="board"></canvas>
|
|
</body>
|
|
</html>
|