Mask the already charted areas in draw mode

This commit is contained in:
Roland Rytz 2017-04-05 03:47:36 +02:00
parent 15fd7becae
commit 2ef3dd5155
3 changed files with 72 additions and 2 deletions

View file

@ -258,6 +258,28 @@ #drawControls > * > *:last-child{
margin-right: 0px;
}
.checkboxLabel{
background-color: #666666;
padding: 3px;
cursor: pointer;
}
.checkboxLabel:hover{
background-color: #777777;
}
#drawControls .checkboxLabel{
display: inline-block;
}
input[type="checkbox"]{
margin: 3px;
vertical-align: middle;
display: inline-block;
width: 15px;
height: 15px;
}
#hint{
display: block;
}

View file

@ -41,6 +41,15 @@ function initDraw(){
var exportOverlay = document.getElementById("exportOverlay");
var exportCloseButton = document.getElementById("exportCloseButton");
var backgroundCanvas = document.createElement("canvas");
backgroundCanvas.width = 1000;
backgroundCanvas.height = 1000;
var backgroundContext = backgroundCanvas.getContext("2d");
var highlightUncharted = true;
renderBackground();
container.style.cursor = "crosshair";
var path = [];
@ -197,6 +206,11 @@ function initDraw(){
exportOverlay.style.display = "none";
});
document.getElementById("highlightUncharted").addEventListener("click", function(e){
highlightUncharted = this.checked;
render(path);
});
function exportJson(){
var exportObject = {
id: 0
@ -307,12 +321,45 @@ function initDraw(){
document.getElementById("subredditField").value = "";
}
function renderBackground(){
backgroundContext.clearRect(0, 0, canvas.width, canvas.height);
backgroundContext.fillStyle = "rgba(0, 0, 0, 0.8)";
//backgroundContext.fillRect(0, 0, canvas.width, canvas.height);
for(var i = 0; i < atlas.length; i++){
var path = atlas[i].path;
backgroundContext.beginPath();
if(path[0]){
backgroundContext.moveTo(path[0][0], path[0][1]);
}
for(var p = 1; p < path.length; p++){
backgroundContext.lineTo(path[p][0], path[p][1]);
}
backgroundContext.closePath();
backgroundContext.fill();
}
}
function render(path){
context.globalCompositeOperation = "source-over";
context.clearRect(0, 0, canvas.width, canvas.height);
if(highlightUncharted){
context.drawImage(backgroundCanvas, 0, 0);
context.fillStyle = "rgba(0, 0, 0, 0.4)";
} else {
context.fillStyle = "rgba(0, 0, 0, 0.6)";
}
context.fillRect(0, 0, canvas.width, canvas.height);
context.beginPath();

View file

@ -69,6 +69,7 @@ <h1>The /r/place Atlas</h1>
</div>
<button disabled id="finishButton">Finish (Enter)</button>
<button id="resetButton">Reset</button>
<label title="Highlight uncharted areas of the map" class="checkboxLabel"><input type="checkbox" id="highlightUncharted" checked> Highlight Empty</label>
<span id="hint">
<p>Click anywhere on the image to start drawing a shape.</p>
<p>When you're happy with the result, click the "Finish" button above or press the Enter key.</p>