Стирание прямоугольников над изображением HTML / JavaScript / CSS - PullRequest
Новая
       8

Стирание прямоугольников над изображением HTML / JavaScript / CSS

0 голосов
/ 07 ноября 2019

Я пытаюсь создать программу, в которой пользователь загружает карту и может покрыть ее и раскрыть ее. Я могу написать код, чтобы позволить пользователю покрывать карту, но не раскрывать карту. Я пытаюсь использовать CSS-спрайты, которые берут часть загруженного изображения и делают то, что рисует пользователь. Поскольку изображение загружается, оно не имеет URL-адреса, поэтому использование спрайтов CSS не работает. Есть ли способ использовать CSS-спрайты или более простой способ? Примечание. Изображение на холсте.

Вот программа, которая помогает при показе: 

         <!DOCTYPE html>
<html> 
  <head>
    <title>Dungeon Crawler</title>
    <style>
    #title {
  font-variant: small-caps;
  font-size: 50px;
}
    </style>  
  </head>
  <body>   

    <h1 id = "title">Dungeon Crawler</h1>


<b id = importMapText> Import Map: </b><span id = "imageLoader"><input type="file" accept="image/*" name="imageLoader"/></span>
<input type="button" id = "back" value="Back" onclick="back()" />
    <p>

 <span id = "tools"> <select id="coverOrUncover">
  <option value="uncover"> Uncover</option> 
  <option value="cover"> Cover </option>   
</select> 

the map with a brush size of 
<input type="text" value = "50" name = "size" id = "size"> pixels. 
</span>


    <canvas id="imageCanvas"></canvas>

    <script src="https://cdn.jsdelivr.net/processing.js/1.4.8/processing.min.js"></script> 

    <script>
      var vv = document.getElementById("tools");
        vv.style.display = "none";
      var v = document.getElementById("title");
        v.style.display = "block";
      var w = document.getElementById("imageCanvas");
        w.style.display = "none";
      var x = document.getElementById("back");
    x.style.display = "none";

   var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
var canvas = document.getElementById('imageCanvas');
var ctx = canvas.getContext('2d');

      document.getElementById("imageLoader").innerHTML = "<input type=\"file\" name=\"imageLoader\">"



function handleImage(e){
  var vv = document.getElementById("tools");
        vv.style.display = "block";
  var v = document.getElementById("title");
        v.style.display = "none";
  var w = document.getElementById("imageCanvas");
        w.style.display = "block";

  document.getElementById("imageLoader").innerHTML = ""
  document.getElementById("size").value = "50"
    var y = document.getElementById("importMapText");
    y.style.display = "none";

    var z = document.getElementById("back");
    z.style.display = "block";

  // ^ shows stuff that need to and hides things that don't

  var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img,0,0);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);  
  // ^ Prints the image to the canvas
}


      function back(){
        var vv = document.getElementById("tools");
        vv.style.display = "none";
        var v = document.getElementById("title");
        v.style.display = "block";

        var w = document.getElementById("imageCanvas");
        w.style.display = "none";

        document.getElementById("imageLoader").innerHTML = "<input type=\"file\" accept=\"image/*\" name=\"imageLoader\">"

        var y = document.getElementById("importMapText");
        y.style.display = "block";

        var z = document.getElementById("back");
        z.style.display = "none";

        // ^ shows stuff that need to and hides things that don't
      }

      </script>

    <script> 
    var sketchProc = function(processingInstance) {
     with (processingInstance) {
        size(700, 400); 
        frameRate(30);

        // ProgramCodeGoesHere
 var size = document.getElementById("size").value; 
    size = parseInt(size, 10);
    var coverOrUncover = document.getElementById("coverOrUncover").value;     

     draw = function() {
       size = document.getElementById("size").value; 
       size = parseInt(size, 10);

       fill(0, 0, 0);
       noStroke();
       rect(mouseX, mouseY, size, size);  
};

            }};

    // Get the canvas that Processing-js will use
    var canvas = document.getElementById("imageCanvas"); 
    // Pass the function sketchProc (defined in myCode.js) to Processing's constructor.
    var processingInstance = new Processing(canvas, sketchProc);   
    </script>

  </body>

</html>

(Извините, некоторые строки скрыты и показаныЭлементы HTML плохо читаются, я пытался сделать их понятнее, но у меня были синтаксические ошибки.)

...