drawing grid

drawing-grid.markdown

drawing grid

A Pen by Tom Hermans on CodePen.

License.

index.html

<div id="controls">
  <div>
    <label for="file"></label>
    <input type="file" id="file">
  </div>
  <!--   <img src="" alt="" id="img"> -->
  <div>
    <label for="cellwidth">Cell Width</label>
    <input type="range" id="cellwidth" min="8" max="60" value="10">
  </div>
  <div>
    <label for="imgsize">Image Size</label>
    <input type="range" id="imgsize" min="50" max="250" value="100">
  </div>
</div>
<div class="page">
  <div class="patterns">
    <svg id="svg" width="100%" height="100%">
      <defs>
        <pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
          <rect width="100%" height="100%" style="fill:rgba(0,0,0,0);stroke-width:2;" stroke="var(--stroke1)" />
        </pattern>
        <mask id="pattern-mask" x="0" y="0" width="1" height="1">
          <rect x="0" y="0" width="1000" height="1000" fill="url(#pattern)" />
        </mask>
      </defs>
      <image id="svgimg" width="100%" height="100%" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" transform="scale(1.4) translate(-50, 0)" />
      <rect x="1" y="1" width="100%" height="100%" stroke="#630" stroke-width="2px" mask="url(#pattern-mask)" fill="#000" />

    </svg>
    <svg id="svg2" width="100%" height="100%">
      <rect x="1" y="1" width="100%" height="100%" stroke="#630" stroke-width="2px" mask="url(#pattern-mask)" fill="black" />
    </svg>
  </div>
</div>
<div id="preview"></div>

script.js

console.clear();
let cw = document.getElementById("cellwidth");
let imgsize = document.getElementById("imgsize");
let pat = document.getElementById("pattern");
let preview = document.getElementById("preview");
let svg = document.getElementById("svg");
let svgimg = document.getElementById("svgimg");
var xlinkns = "http://www.w3.org/1999/xlink";

cw.addEventListener("input", () => {
  console.log(cw.value);
  console.log(pat);
  pat.setAttribute("width", cw.value);
  pat.setAttribute("height", cw.value);
});

imgsize.addEventListener("input", () => {
  console.log(imgsize.value);
  svgimg.setAttribute("width", imgsize.value + "%");
  // console.log(pat);
  // pat.setAttribute("width", cw.value);
  // pat.setAttribute("height", cw.value);
  svgimg.style.transform =
    "translate(-50%, 0) scale(" + imgsize.value / 100 + ")";
});

const inputElement = document.getElementById("file");
inputElement.addEventListener("change", handleFiles, false);
function handleFiles() {
  const fileList = this.files; /* now you can work with the file list */
  console.log(fileList);

  const file = fileList[0];
  const img = document.createElement("img");
  img.classList.add("obj");
  img.file = file;
  preview.appendChild(img);

  const reader = new FileReader();
  reader.onload = (function (aImg) {
    return function (e) {
      aImg.src = e.target.result;
      // console.log(aImg.src);
      svgimg.setAttributeNS(xlinkns, "href", e.target.result);
    };
  })(img);
  reader.readAsDataURL(file);

  // console.log(img.src);
}

style.scss

img {
  max-width: 100%;
  z-index: 0;
}
svg {
  z-index: 1;
  overflow: hidden;
  transform-origin: 50% 50%;
}
#svg {
  --stroke1: rgba(255, 255, 255, 0.4);
}
#svg2 {
  --stroke1: rgba(0, 0, 0, 0.9);
}
.patterns {
  border: 3px solid red;
  height: 100%;
  display: flex;
  // flex-direction: column;
  justify-content: space-between;
  padding: 0.2rem;
  > svg {
    flex: 1;
    width: 100%;
    min-height: 45vh;
    border: 1px solid blue;
  }
  rect {
    pointer-events: none;
  }
}
body {
  display: flex;
  flex-direction: column;
}
#controls {
  width: 50vw;
  margin: 0 auto;
}
#preview {
  padding: 0.2rem;
  outline: 1px solid blue;
  img {
    max-width: 60px;
  }
}
.page {
  background: white;
  width: 100vw;
  height: 100vh;
  max-width: 29.7cm;
  max-height: 21cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
}
@media print {
  #preview,
  #controls {
    display: none;
  }
  .page {
    width: 29.7cm;
    height: 21cm;
    margin: 0;
    box-shadow: 0 0 0.2cm rgba(0, 0, 0, 0.5);

    svg {
      min-height: 45vh;
    }
  }
  @page {
    size: auto; /* auto is the initial value */
    margin: 0; /* this affects the margin in the printer settings */
  }
}