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