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.
111 lines
3.3 KiB
111 lines
3.3 KiB
<!DOCTYPE html>
|
|
<html ng-app="myApp">
|
|
<head>
|
|
<style type="text/css">
|
|
body{
|
|
margin: 8px;
|
|
background: gray;
|
|
cursor: none;
|
|
}
|
|
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 type="text/javascript">
|
|
/*var size = 8;
|
|
var pixels= [];
|
|
var max = { x: 100, y: 80};
|
|
var click = false;
|
|
|
|
for(var i = 1; i<max.x; i++){
|
|
for(var j = 1; j<max.y; j++){
|
|
pixels.push({position:{x: i, y: j}, color: 'blue'});
|
|
}
|
|
}
|
|
|
|
|
|
function createPixel(pixel){
|
|
var div = $(document.createElement("div"));
|
|
|
|
function painter(color) {
|
|
if(click){
|
|
div.css({
|
|
background: color
|
|
});
|
|
}
|
|
}
|
|
|
|
div.html = "Text.";
|
|
|
|
div.css({
|
|
left: pixel.position.x * size,
|
|
top: pixel.position.y * size,
|
|
background: pixel.color,
|
|
width: size,
|
|
height: size
|
|
});
|
|
|
|
div.addClass('pixel');
|
|
|
|
div.mouseover(painter(div, 'black'));
|
|
|
|
$("body").append(div);
|
|
}
|
|
|
|
$( document ).ready(function() {
|
|
$.each( pixels, function( key, pixel ){
|
|
createPixel(pixel);
|
|
});
|
|
|
|
$("body").mousedown(function() {
|
|
click = true;
|
|
}).mouseup(function() {
|
|
click = false;
|
|
});
|
|
|
|
});*/
|
|
|
|
var app = angular.module("myApp", []);
|
|
|
|
app.controller("myCtrl", function($scope) {
|
|
$scope.size = 8;
|
|
$scope.pixels= [];
|
|
$scope.click = false;
|
|
var max = { x: 50, y: 50};
|
|
var id = 1;
|
|
for(var i = 1; i<max.y; i++){
|
|
for(var j = 1; j<max.x; j++){
|
|
$scope.pixels.push({id: id,position:{x: j, y: i}, color: 'blue'});
|
|
id++;
|
|
}
|
|
}
|
|
|
|
$scope.painter = function(pixel){
|
|
if($scope.click){
|
|
pixel.color = 'black';
|
|
}
|
|
};
|
|
});
|
|
|
|
</script>
|
|
</head>
|
|
<body ng-controller="myCtrl" ng-mousedown="click = true" ng-mouseup="click = false">
|
|
<div ng-repeat="pixel in pixels"
|
|
class="pixel"
|
|
ng-mouseover="painter(pixel)"
|
|
style="
|
|
left: {{pixel.position.x * size}}px;
|
|
top: {{pixel.position.y * size}}px;
|
|
background: {{pixel.color}};
|
|
width: {{size}}px;
|
|
height: {{size}}px;"
|
|
>
|
|
</div>
|
|
</body>
|
|
</html>
|