I need help making a zooming function.

General and Gameplay Programming Programming Javascript canvas html CSS zooming

Started by Officer_Erik_K December 14, 2021 08:53 PM

2 comments, last by Officer_Erik_K 2 years, 6 months ago

Officer_Erik_K

22

Author

December 14, 2021 08:53 PM

Well, I am trying to make a zooming function so that you could zoom in and out of the canvas, my HTML is:

<!DOCTYPE html>
<html>
    <head>
        <meta name="build-version" content="V00.001.00" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="no"/>
        <title>Mapper Tool</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <h1>Mapper Tool</h1>
        <p style="text-align:center;">
            <label style="font-size:20px;" for="zoom">Zoom (Currently: <span id="currentZoom">100%</span>):</label>
            <br>
            25%<input type="range" name="zoom" id="zoom" min="25" max="500" defaultValue="100" value="100" step="5" onchange="zoom('change')">500%
            <br>
            <button id="zoomReset" onclick="zoom('reset')">Zoom Reset</button>
        </p>
        <div id="mapContainer">
            <div id="mapCur">
                <canvas id="mapDrawer" width="6000" height="6000">Your browser does not support the canvas element.</canvas>
                <!--<iframe src="map/map.html" title="The Map" width="6000" height="6000"></iframe>-->
            </div>
        </div>
        <!-- non-resource JS files -->
        <script src="map/map.js"></script>
        <script src="script.js"></script>
    </body>
</html>

My JavaScript is:

map.js:

var canvas = document.getElementById("mapDrawer");
var ctx = canvas.getContext("2d");
ctx.moveTo(3000,0);
ctx.lineTo(3000,10);
ctx.stroke();

script.js:

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1) ) + min;
}

function setCookie(cname, cvalue) {
    document.cookie = cname + "=" + cvalue + ";";
}

function getCookie(cname) {
    let name = cname + "=";
    let ca = document.cookie.split(';');
    for(let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

/* -------------------------------------------------------------------------------- */

function zoom(type) {
    var zoomSlider = document.getElementById("zoom");
    var currentZoom = document.getElementById("currentZoom");
    var mapCur = document.getElementById("mapCur");
    if (type == "change") {
        mapCur.style.transform = "scale(" + (zoomSlider.value/100) + "," + (zoomSlider.value/100) + ")";
        currentZoom.innerHTML = zoomSlider.value + "%";
    } else if (type == "reset") {
        zoomSlider.value = 100;
        currentZoom.innerHTML = zoomSlider.value + "%";
    }
}
zoom("change");

My CSS is:

/* elements */

body {
    overflow-x: hidden;
}

button {
    font-size: 1.171303074670571vw; /* 16px */
    cursor: pointer;
}

p {
    font-size: 1.171303074670571vw; /* 16px */
}

span {
    font-size: 1.171303074670571vw; /* 16px */
}

a {
    font-size: 1.171303074670571vw; /* 16px */
    text-decoration: none;
}

img {
    width: 100%;
    pointer-events: none;
}

iframe:focus {
  outline: none;
}

iframe[seamless] {
  display: block;
}

/* Headers */

h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

h1 {
    font-size: 7.320644216691069vw; /* 80  100px */
}

h2 {
    font-size: 5.856515373352855vw; /* 40   80px */
}

h3 {
    font-size: 4.392386530014641vw; /* 30   60px */
}

h4 {
    font-size: 2.9282576866764276vw; /* 20   40px */
}

h5 {
    font-size: 1.4641288433382138vw; /* 18    20px */
}

h6 {
    font-size: 1.171303074670571vw; /* 16px */
}

/* footer -/||\- header */

header {
    display: block;
    text-align: center;
    /*padding: 0.21961932650073207vw; 3px*/
}

footer {
    display: block;
    padding: 1.4641288433382138vw; /* 20px */
    background: black;
    color: white;
    overflow-x: hidden;
    position: absolute;
    left: 0;
    width: 100%;
    /*
    position: relative;
    bottom: 0;
    width: 100%;
    */
}

#footSpacer {
    height: 16.837481698389457vw; /* 230px */
}

#footBtns {
    display: none;
    text-align: center;
}

#footContent {
    text-align:center;
}

/* -------------------------------------------------------------------------------- */

.hrSeps {
    border: 1px solid black;
    width: 100%;
    position: absolute;
    left: 0;
}

.ss {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.buttons {
    text-align: center;
}

.hiddenTab {
    visibility: hidden;
    position: absolute;
}

.tabs {
    text-align: center;
}

.tab {
    background-color: #008CBA; /* Blue */
    border: none;
    color: white;
    padding: 1.171303074670571vw 2.342606149341142vw; /* 16px 32px */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.171303074670571vw; /* 16px */
    /*margin: 4px 2px;*/
    transition-duration: 0.4s;
    cursor: pointer;
}

.style-tab1 {
    background-color: white; 
    color: black;
    border: 2px solid #008CBA;
}

.style-tab1:hover {
    background-color: #008CBA;
    color: white;
}

.styletab1-active, .style-tab1:active {
    background-color: #ff7398;
    color: black;
    border: 0.14641288433382138vw solid #ff7398; /* 2px */
}

.style-tab2 {
    background-color: white;
    color: black;
    border: 0.14641288433382138vw solid #ff0043; /* 2px */
}

.style-tab2:hover {
    background-color: #ff0043;
    color: white;
}

.pbtnU {
    font-size: 1.4641288433382138vw; /* 20px */
}

.btnU {
    background-color: #ff0043;
    border: 0.29282576866764276vw solid #ff7398; /* 4px */
    color: white;
    padding: 0.8784773060029283vw 2.049780380673499vw; /* 16px 32px     12px 28px */
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 1.4641288433382138vw; /* 16px   20px */
    /*margin: 4px 2px;*/
    transition-duration: 0.4s;
    cursor: pointer;
}

.btnU:hover {
    background-color: #ff7398;
    border: 0.29282576866764276vw solid #ff0043; /* 4px */
    color: black;
}

.imgCenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.centerTxt {
    text-align: center;
}

.pre {
    font-family: monospace;
}

.pre p {
    font-weight: bold;
    white-space: pre;
    margin: 1.171303074670571vw 0; /* 1em // 16px */
}

/* -------------------------------------------------------------------------------- */

#currentZoom {
    font-size: 16px;
}

#zoom {
    width: 73.20644216691069vw; /* 1000px */
}

#zoomReset {
    font-size: 16px;
}

#mapContainer {
    overflow: scroll;
    width: 99.38%;
    height: 99.38%;
    position: absolute;
    left: 0;
    border: 4px solid #c3c3c3;
}

#mapDrawer {
    width: 6000px;
    height: 6000px;
}

However, I just can't seem to make a function that actually zooms in without making the little test line disappear. I would really like some help.

– Erik P. Kountzman - Owner - of - Airent Animation Entertainment --

LorenzoGatti

4,650

December 16, 2021 03:49 PM

You are mixing px, vw and percentage CSS size units.
Try using px only and get rid of whatever put horrible noninteger numbers and assorted irrelevant trash in your stylesheet.
Does the test line in the canvas shrink to an invisible size? Does it move outside the viewport?
Try drawing big rectangles or images.

Omae Wa Mou Shindeiru

Officer_Erik_K

22

Author

December 16, 2021 07:34 PM

@LorenzoGatti

Well, does the mixing of px, vw, and percentage CSS size units matter, I think that is not much of a problem after all it is just the way that I want it.

Sorry, but nothing in my stylesheet is irrelevant, they all have a purpose or will have one eventually.

Also, the test line does not shrink to an invisible size, but the only thing that is giving me trouble is that it disappears when I want it to get bigger and I don't think it is leaving the viewport it is just moving outside of the div witch is set to be scrollable, so It shouldn't be disappearing in a way that I can't see it, so I just want to find out what is causing it so I can fix it. It is very annoying that I can't zoom in without using my browser's built-in zoom function as I just want to be able to zoom in and out of the canvas. Also, I did find some JavaScript Library's that could help me make a zoom function, but I ran into a few problems with them, witch one of those problems was that they were designed to make the whole page zoom in/out or the documentation was just impossible to understand, meaning laking the information that I would need to customize it to fit my purpose.

– Erik P. Kountzman - Owner - of - Airent Animation Entertainment --

🎉 Celebrating 25 Years of GameDev.net! 🎉

I need help making a zooming function.

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

🎉 Celebrating 25 Years of GameDev.net! 🎉

I need help making a zooming function.

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines