Incorporating Zoom In / Zoom Out

asasass · November 7, 2017, 11:06pm

How would I incorporate Zoom In / Zoom Out on a piece of working code, but just the image part?

Revised:
I think I would only need 1 input for both Zoom in / Zoom out

<style>
  #playButton5 {
    position: relative;
    width: 260px;
    height: 245px;
    background-image: url("https://i.imgur.com/qaEvk4G.png");
    border: 3px solid blue;
  }
  
  [type="number"] {
    width: 5em;
  }

</style>

<div id="playButton5" onclick="">

  <svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"  ></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>

  </svg>
</div>

<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1"step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800" >
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800" >
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800" >
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx"step="0.01" min="0" max="800" >
    </label>
    <label>cy:
      <input type="number" id="cy"step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>

  <p>Zoom
    <label> In:
      <input type="number" id="in">
    </label>
    <label> Out:
      <input type="number" id="ou">
    </label>
  </p>
  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

  </script>

coothead · November 8, 2017, 1:13am

Hi there asasass,

here is one possible way…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
  #playButton5 {
    position: relative;
    display: inline-block;
    background-image: url("https://i.imgur.com/qaEvk4G.png");
    background-size: 100% auto;
    border: 3px solid blue;
  }
  
  [type="number"] {
    width: 5em;
  }

</style>
</head>
<body>
  <p>
   <input type="button" value="zoom in" id="zoomIn">
   <input type="button" value="zoom out" id="zoomOu">
  </p>
<div id="playButton5">

  <svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"  ></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>
  </svg>
</div>

<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1" step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800">
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800">
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800">
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx" step="0.01" min="0" max="800">
    </label>
    <label>cy:
      <input type="number" id="cy" step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>


  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

/*************************** Zoom code  ***************************/

   var c = 0;
   var svg = document.getElementsByTagName( 'svg' )[ 0 ];

   document.getElementById( 'zoomIn' ).addEventListener( 'click',
      function(){
         c += 10;  /* adjust value to suit */ 
         svg.setAttribute( 'width', 260 + c );
         svg.setAttribute( 'height',245 + ( c * 245/260 ) );
      }, false );

   document.getElementById( 'zoomOu' ).addEventListener( 'click',
      function(){
         c -= 10;  /* adjust value to suit */ 
         if (c < 0 ) {
             c = 0; 
           }
         svg.setAttribute( 'width', 260 + c );
         svg.setAttribute( 'height', 245 + ( c * 245/260 ) );
      }, false );

/******************************************************************/

  </script>

</body>
</html>

@Paul_Wilkins may, of course, have something
better as this is his code project.

coothead

asasass · November 8, 2017, 1:18am

Can you add a reset button to put it back to it’s original size?

coothead · November 8, 2017, 1:24am

I certainly can…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
  #playButton5 {
    position: relative;
    display: inline-block;
    background-image: url("https://i.imgur.com/qaEvk4G.png");
    background-size: 100% auto;
    border: 3px solid blue;
  }
  
  [type="number"] {
    width: 5em;
  }

</style>
</head>
<body>

  <p>
   <button id="zoomIn">zoom in</button>
   <button id="zoomOu">zoom out</button>
   <button id="zoomba">restore</button>
  </p>

<div id="playButton5">
  <svg stroke-width="2" class="initial" width="260" height="245" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"  ></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>
  </svg>
</div>

<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1" step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800">
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800">
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800">
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx" step="0.01" min="0" max="800">
    </label>
    <label>cy:
      <input type="number" id="cy" step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>


  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

/*************************** Zoom code  ***************************/

   var c = 0;
   var svg = document.getElementsByTagName( 'svg' )[ 0 ];

   document.getElementById( 'zoomIn' ).addEventListener( 'click',
      function(){
         c += 10;  /* adjust value to suit */ 
         svg.setAttribute( 'width', 260 + c );
         svg.setAttribute( 'height',245 + ( c * 245/260 ) );
      }, false );

   document.getElementById( 'zoomOu' ).addEventListener( 'click',
      function(){
         c -= 10;  /* adjust value to suit */ 
         if (c < 0 ) {
             c = 0; 
           }
         svg.setAttribute( 'width', 260 + c );
         svg.setAttribute( 'height', 245 + ( c * 245/260 ) );
      }, false );

   document.getElementById( 'zoomba' ).addEventListener( 'click',
      function(){
         c = 0; 

         svg.setAttribute( 'width', 260 + c );
         svg.setAttribute( 'height', 245 + ( c * 245/260 ) );
      }, false );

/******************************************************************/

  </script>

</body>
</html>

coothead

asasass · November 8, 2017, 1:27am

Thank you.

coothead · November 8, 2017, 1:33am

No problem, your very welcome.

coothead

asasass · November 8, 2017, 3:41am

How can I zoom in on a 53 x 53 image, starting at it’s original size, and not blown up?

asasass · November 8, 2017, 3:45am

I just did this:

asasass · November 8, 2017, 9:00am

I meant I used the same image as before, by itself in the middle of a 260 x 260 blank square. It doesn’t show it on the fiddle cause it’s not the right link. I thought I had posted it, guess not. But you know what I mean.

coothead · November 8, 2017, 10:03am

Do you mean something like this…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
  #playButton5 {
    position: relative;
    display: inline-block;
    background-image: url( https://i.imgur.com/AXnYTk8.png );
    background-size: 100% auto;
    border: 3px solid blue;
  }
  
  [type="number"] {
    width: 5em;
  }

</style>
</head>
<body>

  <p>
   <button id="zoomIn">zoom in</button>
   <button id="zoomOu">zoom out</button>
   <button id="zoomba">restore</button>
  </p>

<div id="playButton5">
  <svg stroke-width="2" class="initial" width="53" height="53" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"  ></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>
  </svg>
</div>

<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1" step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800">
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800">
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800">
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx" step="0.01" min="0" max="800">
    </label>
    <label>cy:
      <input type="number" id="cy" step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>


  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

/*************************** Zoom code  ***************************/

   var c = 0;
   var svg = document.getElementsByTagName( 'svg' )[ 0 ];

   var w = parseFloat( svg.getAttribute( 'width' ) ); 
   var h = parseFloat( svg.getAttribute( 'height' ) );

   document.getElementById( 'zoomIn' ).addEventListener( 'click',
      function(){
         c += 10;  /* adjust value to suit */ 

         svg.setAttribute( 'width', w + c );
         svg.setAttribute( 'height', h + ( c * h/w ) );
      }, false );

   document.getElementById( 'zoomOu' ).addEventListener( 'click',
      function(){
         c -= 10;  /* adjust value to suit */ 
         if (c < 0 ) {
             c = 0; 
           }
         svg.setAttribute( 'width', w + c );
         svg.setAttribute( 'height', h + ( c * h/w ) );
      }, false );

   document.getElementById( 'zoomba' ).addEventListener( 'click',
      function(){
         c = 0; 

         svg.setAttribute( 'width', w  );
         svg.setAttribute( 'height', h );
      }, false );

/******************************************************************/

  </script>

</body>
</html>

ccothead

asasass · November 8, 2017, 10:06am

It doesn’t work like that cause radius should be around 24

asasass · November 8, 2017, 10:08am

What I did was something like this, and that worked fine. That’s what I was describing.

coothead · November 8, 2017, 11:10am

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">


  #playButton5 {
    position: relative;
    display: inline-block;
    background-color: #f00;
    background-image: url( https://i.imgur.com/AXnYTk8.png );
    background-size: 24% auto;
    background-repeat: no-repeat;
    background-position: 52.5% 49%;
    border: 3px solid blue;
  }

  [type="number"] {
    width: 5em;
  }

</style>
</head>
<body>

  <p>
   <button id="zoomIn">zoom in</button>
   <button id="zoomOu">zoom out</button>
   <button id="zoomba">restore</button>
  </p>
<div id="container">
<div id="playButton5">
  <svg stroke-width="2" class="initial" width="265" height="245" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"  ></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>
  </svg>
</div>
</div>
<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1" step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800">
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800">
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800">
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx" step="0.01" min="0" max="800">
    </label>
    <label>cy:
      <input type="number" id="cy" step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>


  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

/*************************** Zoom code  ***************************/

   var c = 0;
   var svg = document.getElementsByTagName( 'svg' )[ 0 ];

   var w = parseFloat( svg.getAttribute( 'width' ) ); 
   var h = parseFloat( svg.getAttribute( 'height' ) );

   document.getElementById( 'zoomIn' ).addEventListener( 'click',
      function(){
         c += 10;  /* adjust value to suit */ 

         svg.setAttribute( 'width', w + c );
         svg.setAttribute( 'height', h + ( c * h/w ) );
      }, false );

   document.getElementById( 'zoomOu' ).addEventListener( 'click',
      function(){
         c -= 10;  /* adjust value to suit */ 
         if (c < 0 ) {
             c = 0; 
           }
         svg.setAttribute( 'width', w + c );
         svg.setAttribute( 'height', h + ( c * h/w ) );
      }, false );

   document.getElementById( 'zoomba' ).addEventListener( 'click',
      function(){
         c = 0; 

         svg.setAttribute( 'width', w  );
         svg.setAttribute( 'height', h );
      }, false );

/******************************************************************/

  </script>

</body>
</html>

coothead

asasass · November 8, 2017, 11:15am

That’s what I did, sorta.

asasass · November 8, 2017, 11:17am

go back to your 2nd example. That’s what I used the image on.

asasass · November 9, 2017, 8:33am

Can Zoom in/out be controlled with a slider?

This would be more efficient than clicking a hundred times.

coothead · November 9, 2017, 11:20am

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled d</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
#zoomer {
    display:flex;
    padding:0.5em;
 }

#playButton5 {
    position: relative;
    display: inline-block;
    background-image: url(https://i.imgur.com/qaEvk4G.png);
    background-size: 100% auto;
    border: 3px solid blue
  }

[type="number"] {
    width: 5em;
  }

</style>
</head>
<body>

<div id="zoomer">
 <label for="zoom">zoom</label>
 <input id="zoom" type="range" step="1" min="0" max="1000" value="0">
 <span id="rv">0</span>
</div>

<div id="playButton5">
  <svg stroke-width="2" class="initial" width="265" height="245" viewbox="0 0 260 245">
    <line stroke="red" x1="4" y1="122" x2="29" y2="122" stroke-width="2"></line>
    <line stroke="orange" x1="38" y1="122" x2="108" y2="122" stroke-width="2"></line>
    <line stroke="yellow" x1="83" y1="91" x2="188" y2="151" stroke-width="2"></line>
    <line stroke="green" x1="135" y1="61" x2="135" y2="182" stroke-width="2"></line>
    <line stroke="cyan" x1="82" y1="152" x2="187" y2="91" stroke-width="2"></line>
    <line stroke="blue" x1="148" y1="98" x2="183" y2="38" stroke-width="2"></line>
    <line stroke="purple" x1="187" y1="31" x2="199" y2="9" stroke-width="2"></line>
    <line stroke="violet" x1="148" y1="145" x2="183" y2="205" stroke-width="2"></line>
    <line stroke="magenta" x1="188" y1="213" x2="200" y2="233" stroke-width="2"></line>
    <circle stroke="red" fill="black" cx="135" cy="122" r="24.5" stroke-width="2"></circle>
  </svg>
</div>

<p>
  <select id="lines">
    <option value="">Select a line</option>
  </select>
  <p>Line
    <label>x1:
      <input type="number" id="x1" step="0.01" min="0" max="800">
    </label>
    <label>y1:
      <input type="number" id="y1" step="0.01" min="0" max="800">
    </label>
    <label>x2:
      <input type="number" id="x2" step="0.01" min="0" max="800">
    </label>
    <label>y2:
      <input type="number" id="y2" step="0.01" min="0" max="800">
    </label>
  </p>
 

  <p>Circle
    <label> cx:
      <input type="number" id="cx" step="0.01" min="0" max="800">
    </label>
    <label>cy:
      <input type="number" id="cy" step="0.01" min="0" max="800">
    </label>
    <label>r:
      <input type="number" id="r" step="0.01" min="0" max="800">
    </label>
  </p>
  
  <p>Stroke
    <label> Viewed:
      <input type="number" id="vi">
    </label>
    <label> Active:
      <input type="number" id="ac">
    </label>
  </p>


  
  <pre id="result">

</pre>

  <script>
    var select = document.querySelector("#lines");
    var isShiftedKey = false;

    document.querySelectorAll("svg *").forEach(function(shape) {
      var option = document.createElement("option");
      if (shape.nodeName === "line") {
        option.value = shape.getAttribute("stroke");
        option.text = shape.getAttribute("stroke");
      }

      if (shape.nodeName === "circle") {
        option.value = shape.getAttribute("fill");
        option.text = shape.getAttribute("fill");
      }

      select.add(option);
    });

    function getShape(color) {

      var shapeSelector = "svg [stroke='" + color + "']";
      var shape = document.querySelector(shapeSelector);

      if (!shape) {
        shapeSelector = "svg [fill='" + color + "']";
        shape = document.querySelector(shapeSelector);
      }
      return shape;
    }


    function setShapeWidth(line, size) {
      line.setAttribute("stroke-width", size);
    }
    select.addEventListener("change", function(evt) {
      var shape;
      Array.from(select.options).forEach(function(option) {
        if (!option.value) {
          return;
        }
        shape = getShape(option.value);

        setShapeWidth(shape, 2);

      });


      shape = getShape(this.value);
      setShapeWidth(shape, 6);
      var inputs = document.querySelectorAll("input");
      Array.from(inputs).forEach(input => input.value = "");


      if (shape.nodeName === "line") {
        document.getElementById("x1").value = shape.getAttribute("x1");
        document.getElementById("y1").value = shape.getAttribute("y1");
        document.getElementById("x2").value = shape.getAttribute("x2");
        document.getElementById("y2").value = shape.getAttribute("y2");
      }
      if (shape.nodeName === "circle") {
        document.getElementById("cx").value = shape.getAttribute("cx");
        document.getElementById("cy").value = shape.getAttribute("cy");
        document.getElementById("r").value = shape.getAttribute("r");
      }
    });

    function escapeHTML(html) {
      return document.createElement('div').appendChild(document.createTextNode(html)).parentNode.innerHTML;
    }

    function updateLine(evt) {
      var input = this;
      line = getShape(select.options[select.selectedIndex].value);
      if (!line) {
        return;
      }
      line.setAttribute(this.id, this.value);
      var linesCode = document.querySelector("svg").innerHTML;
      document.getElementById("result").innerHTML =
        escapeHTML(linesCode);
      return;

    }
    Array.from(document.querySelectorAll("input")).forEach(function(input) {
      input.addEventListener("click", updateLine);
      input.addEventListener("keyup", updateLine);
    });

/*************************** Zoom code  ***************************/

   var svg = document.getElementsByTagName( 'svg' )[ 0 ];
   var w =  parseFloat( svg.getAttribute( 'width' ) ) ; 
   var h =  parseFloat( svg.getAttribute( 'height' ) );

   document.getElementById( 'zoom' ).addEventListener( 'change',
      function(){
         document.getElementById( 'rv' ).textContent = this.value;
         svg.setAttribute( 'width', w + this.valueAsNumber );
         svg.setAttribute( 'height', h +  this.valueAsNumber * h/w  );
},false);

/******************************************************************/

 </script>

</body>
</html>

coothead

asasass · November 9, 2017, 11:22am

Can you set it so that it zooms in and out as you drag it?

not only after you’ve released the mouse.

coothead · November 9, 2017, 11:30am

No.

What you can do though, is click anywhere between
start and end to get an instantaneous change.

coothead

asasass · November 9, 2017, 11:34am

with the keyboard it does, not the mouse then I guess.

Topic		Replies	Views
Adding zoom-in and zoom-out features using javascript JavaScript	1	896	October 25, 2023
Questions about transform: scale HTML & CSS	5	1601	January 4, 2018
Zooming out in Google Maps JavaScript	7	6763	November 17, 2015
How do i click the picture JavaScript	3	537	October 8, 2014
What is it about the setup of Code 2 that won't let you make the play button larger within the box? HTML & CSS	9	2054	January 4, 2018

Incorporating Zoom In / Zoom Out

Related topics