asasass
November 7, 2017, 11:06pm
1
How would I incorporate Zoom In / Zoom Out on a piece of working code, but just the image part?
Revised:
<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>
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
coothead
1 Like
Can you add a reset button to put it back to it’s original size?
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
1 Like
coothead
How can I zoom in on a 53 x 53 image, starting at it’s original size, and not blown up?
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.
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
11
It doesn’t work like that cause radius should be around 24
asasass
November 8, 2017, 10:08am
12
What I did was something like this, and that worked fine. That’s what I was describing.
<!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
14
That’s what I did, sorta.
asasass
November 8, 2017, 11:17am
15
go back to your 2nd example. That’s what I used the image on.
asasass
November 9, 2017, 8:33am
16
Can Zoom in/out be controlled with a slider?
This would be more efficient than clicking a hundred times.
<!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
1 Like
asasass
November 9, 2017, 11:22am
18
Can you set it so that it zooms in and out as you drag it?
not only after you’ve released the mouse.
No.
What you can do though, is click anywhere between
coothead
asasass
November 9, 2017, 11:34am
20
with the keyboard it does, not the mouse then I guess.
