Dynamically update divisionRaster #2051

Sorok-Dva · 2023-11-04T19:19:48Z

Hello, I use paperjs for the divisionRaster part but I have a problem.

I would like to dynamically change the divisionRaster with a button. I tried so many things but I can't manage to accomplish that.

Here is my code. It's split in two files.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Division Raster</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.8/handlebars.min.js" integrity="sha512-E1dSFxg+wsfJ4HKjutk/WaCzK7S2wv1POn1RRPGh8ZK+ag9l244Vqxji3r6wgz9YBf6+vhQEYJZpSjqWFPg9gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<script>
    let loadTemplate = (url, data, callback) => {
        $.ajax({ url, cache: true, success: (source) => {
                let template = Handlebars.compile(source);
                return callback(template(data));
            }})
    };
    loadTemplate('/views/game/game.hbs', {
        url: 'data:image/jpeg;base64........'}, (html) => {
        $('#gameContainer').empty().append(html);
    });

    const nextRound = () => {
        loadTemplate('/views/game/game.hbs', { url: 'data:image/jpeg;base64,/......'}, (html) => {
            $('#gameContainer').empty().append(html);
        })
    }

</script>
    <div id="gameContainer"></div>
    <button onclick="nextRound()">Next</button>

</body>
</html>

And here is the /views/game/game.hbs file :

<script type="text/paperscript" canvas="canvas">
  // Create a raster item using the image with id='mona'
  var raster = new Raster('game');

  // Make the raster invisible:
  raster.visible = false;

  var lastPos = view.center;
  function moveHandler(event) {
    if (lastPos.getDistance(event.point) < 10)
      return;
    lastPos = event.point;

    var size = this.bounds.size.clone();
    var isLandscape = size.width > size.height;

    // If the path is in landscape orientation, we're going to
    // split the path horizontally, otherwise vertically:

    size /= isLandscape ? [2, 1] : [1, 2];

    var path = new Path.Rectangle({
      point: this.bounds.topLeft.floor(),
      size: size.ceil(),
      onMouseMove: moveHandler
    });
    path.fillColor = raster.getAverageColor(path);

    var path = new Path.Rectangle({
      point: isLandscape
        ? this.bounds.topCenter.ceil()
        : this.bounds.leftCenter.ceil(),
      size: size.floor(),
      onMouseMove: moveHandler
    });
    path.fillColor = raster.getAverageColor(path);

    this.remove();
  }

  function onResize(event) {
    project.activeLayer.removeChildren();

    // Transform the raster so that it fills the bounding rectangle
    // of the view:
    raster.fitBounds(view.bounds, true);

    // Create a path that fills the view, and fill it with
    // the average color of the raster:
    new Path.Rectangle({
      rectangle: view.bounds,
      fillColor: raster.getAverageColor(view.bounds),
      onMouseMove: moveHandler
    });
  }
</script>
<canvas id="canvas" resize></canvas>
<img width="512" height="512" id="game" style="display: none;" src="{{url}}">

The problem is that it works at the first loading, but when I click the "next" button, nothing appears and I've no error in the console.

Here is a quick video to show https://youtu.be/kHNVNrePFl8

Thanks for your help

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamically update divisionRaster #2051

Dynamically update divisionRaster #2051

Sorok-Dva commented Nov 4, 2023

Dynamically update divisionRaster #2051

Dynamically update divisionRaster #2051

Comments

Sorok-Dva commented Nov 4, 2023