J'ai un bug étrange qui ne permet à mon code Javascript de s'exécuter correctement que si les outils de développement Chrome sont ouverts. J'ai lu tous les autres articles avec différentes solutions, notamment la suppression de toutes les instructions console.log() et la désactivation de la mise en cache pour jQuery AJAX (je n'utilise pas jQuery), mais ils ne fonctionnent pas.

En fin de compte, j'ai une barre de navigation, un conteneur vidéo, 9 images, puis j'ai un canevas sur lequel je souhaite dessiner. Le code est censé fonctionner sur le canevas pour permettre le dessin, mais ne fonctionne qu'avec les outils de développement Chrome ouverts.

La particularité est que si je supprime 6 images de telle sorte qu'il ne me reste que 2 images au-dessus du canevas, le canevas peut être dessiné sans ouvrir les outils de développement.

Je ne pense pas que ce soit un problème "d'être dessiné mais simplement de ne pas apparaître à l'écran" car j'ai les bons décalages pour que les dessins apparaissent, et même si je ne l'ai pas fait, cela ne devrait pas fonctionner même si j'ai un développeur outils ouverts.

Voici le fichier html simplifié :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <link rel="stylesheet" href="css/templatemo-style.css">
        <link href="https://fonts.googleapis.com/css?family=Kanit:100,200,300,400,500,600,700,800,900" rel="stylesheet">
    </head>
<body>
    <nav>
        <div class="logo">
            <a href="index.html">Buy <em>High, </em>Sell <em>Low</em> </a>
        </div>
        <div class="logo1">
            <a href="https://jayvyer.github.io/">Javier <em>Liu</em></a>
        </div>
    </nav>
    <div id="video-container">
        <div class="video-overlay"></div>
        <div class="video-content">
            <div class="inner">
              <h1>Welcome to <em>BHSL</em></h1>
              <p style="font-size: 36px">Basic Trading Patterns</p>
              <p style="font-size: 10px">Always buy at highest, sell at cheapest!</p>
              <p style="font-size: 6px">Don't actually do this. Not financial advice.</p>
                <div class="scroll-icon">
                    <a class="scrollTo" href="#portfolio"><img src="img/scroll-icon.png" alt=""></a>
                </div>
            </div>
        </div>
        <video autoplay="" loop="" muted>
            <source src="increase_stonk.mp4" type="video/mp4" />
        </video>
    </div>
    <div class="full-screen-portfolio" id="portfolio">
        <div class="container-fluid">
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="triangles.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Ascending & Descending<em>Triangles</em></h1>
                                <p>Continuation Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/ascending_triangle5.png">
                        </div>
                    </a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="cup-handle.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Cup <em> and Handle</em></h1>
                                <p>Continuation Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/cuphandle.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="flag-pennant.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Flags <em> and Pennants</em></h1>
                                <p>Continuation Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/flagpennant.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="rectangles.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Top and Bottom <em> Rectangles</em></h1>
                                <p>Continuation Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/rectangle.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="doubles.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Double <em> Tops & Bottoms</em></h1>
                                <p>Reversal Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/double.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="triples.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Triple <em> Tops & Bottoms</em></h1>
                                <p>Reversal Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/triple.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="wedges.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Falling & Rising <em> Wedges</em></h1>
                                <p>Reversal Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/wedge.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="2in1dandruffshampoo.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Head and <em>Shoulders</em></h1>
                                <p>Reversal Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/headshoulders.png">
                        </div></a>
                </div>
            </div>
            <div class="col-md-4 col-sm-6">
                <div class="portfolio-item">
                    <a href="diamonds.html">
                        <div class="hover-effect">
                            <div class="hover-content">
                                <h1>Diamond <em>Tops & Bottoms</em></h1>
                                <p>Reversal Pattern</p>
                            </div>
                        </div>
                        <div class="image">
                            <img src="img/diamond.png">
                        </div></a>
                </div>
            </div>
        </div>
        <div class="canvas_" style="text-align:center;background-color: #011423;">
            <canvas id="can" width="400" height="400" style="top:0%;left: 10%;right: 500%;border:2px solid;margin: 20px;border-radius: 35px; border-width: medium; border-color: #311746;"></canvas>
            <script type="text/javascript" src="C:\Users\javie\Documents\Recognizer\bundle.js"></script>
            <!-- <div class="">
                <span style="margin-right: 50px;"><button onclick="erase()" id="clearboard" style="background-color: #000000; border-radius: 50px; color: #ffffff">Clear Board</button></span>
                <span><button onclick="fnClick()" id="my-button2" style="background-color: #000000; border-radius: 50px; color: #ffffff">Calculate Similarity</button></span>
                <br><br>
            </div> -->
        </div>
    </div>
</body>
</html>

Voici le fichier JavaScript:

var canvas, ctx, flag = false, prevX = 0, currX = 0, prevY = 0, currY = 0, dot_flag = false, coordinates = [];
var curvematcher = require('curve-matcher')

const init = () => {
    canvas = document.getElementById('can');
    canvas.style.backgroundColor = "#fffcf5";
    ctx = canvas.getContext("2d");
    ctx.canvas.width = window.innerWidth * .80;
    w = canvas.width;
    h = canvas.height;
    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

const draw = () => {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY + 669);
    ctx.lineTo(currX, currY + 669);
    console.log("x: " + currX + " y: " + currY);
    coordinates.push({x:prevX, y: prevY + 669});
    ctx.strokeStyle = "black";
    ctx.lineWidth = 3;
    ctx.stroke();
    ctx.closePath();
}

const erase = () => {
    var m = confirm("Are you sure you want to clear the entire board?");
    // coordinates.forEach((item, i) => {
    //  console.log(" {x: " + coordinates[i].x + ", y: " + coordinates[i].y + "},");
    // });
    if (m) {
        coordinates = [];
        ctx.clearRect(0, 0, w, h);
    }
}

const findxy = (res, e) => {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;

    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}

init()

Comme je l'ai dit, ce qui me dérange vraiment, c'est que si je déplace la toile vers le haut ou si je supprime certaines images, la toile peut être dessinée correctement. J'ai l'impression que si je mettais la toile sur une autre page, cela fonctionnerait certainement, mais je ne veux pas être obligé d'avoir la toile séparée des images, car elles sont importantes ensemble, et je préférerais immensément que ce soit en dessous les images.

Existe-t-il un problème concernant le nombre d'images pouvant figurer sur une page ? Ou peut-être une contrainte sur le flux des toiles sur une page ?

1
beepbeepboop123123 1 nov. 2020 à 04:32

1 réponse

Meilleure réponse

Vous avez des calculs incorrects pour xy, qui vont au-delà du canevas.

Si votre toile est située en bas de la page avec le défilement

canvas.offsetTop représenterait l'espace depuis le début du défilement (grandit à l'infini lorsque votre défilement grandit), mais e.clientY augmenterait jusqu'à la hauteur de la fenêtre (hauteur d'affichage) qui est un nombre fixe.

Je suggérerais d'utiliser mouseEvent.offsetX qui est pris en charge dans ie9+ et testez-le dans différentes conditions sur différents navigateurs. Je l'ai testé dans Chrome et il fonctionne parfaitement avec et sans défilement.

 const findxy = (res, e) => {
    if (res == 'down') {
      prevX = currX;
      prevY = currY;
      currX = e.offsetX;
      currY = e.offsetY;

      flag = true;

    }
    if (res == 'up' || res == "out") {
      flag = false;
    }
    if (res == 'move') {
      if (flag) {
        prevX = currX;
        prevY = currY;
        currX = e.offsetX;
        currY = e.offsetY;
        draw();
      }
    }
  }
1
deathangel908 2 nov. 2020 à 11:04