centerReg() does not working on ZimJS version 10

fjugaldev commented 5 years ago

Hi,

Im using ZimJS with tag ZIM10 in order to create a isometric world map.

This is my code:

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM Frame - Fit Template</title>

<script src="https://d309knd7es5f10.cloudfront.net/createjs_1.1_min.js"></script>
<script>
    var zon = true;
    var zns = false;
</script>
<script src="zimjs.js"></script>
<script>

var scaling = "full"; // this will resize to fit inside the screen dimensions
var width = 1920;
var height = 1080;
var color = light; // ZIM colors like green, blue, pink, faint, clear, etc.
var outerColor = dark; // any HTML colors like "violet", "#333", etc. are fine to use

var frame = new Frame(scaling, width, height, color, outerColor);

frame.on("ready", function() {
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    var stage = frame.stage;
    var stageW = frame.width;
    var stageH = frame.height;

    var holder = new Container();
    var tile = new Tile(new Rectangle(50, 50, frame.light, frame.dark).centerReg(null, null, false), 8, 8)
      .rot(45)
      .addTo(holder)
      .outline();

    holder.sca(2, 1).center();

    tile.on("mouseover", function(e) {
      e.target.color = frame.pink;
      stage.update();
    });

    tile.on("mouseout", function(e) {
      e.target.color = frame.light;
      stage.update();
    });

    var ball = new Circle(40, frame.blue, frame.dark).center().sha();

    tile.on("click", function(e){
      var point = tile.localToGlobal(e.target.x, e.target.y);
      ball.pos(point.x, point.y);
      stage.update();
    });

    stage.update(); // this is needed to show any changes

}); // end of ready

</script>

<meta name="viewport" content="width=device-width, user-scalable=no" />

</head>

<body>
<!-- canvas with id="myCanvas" is made by zim Frame -->
</body>
</html>

But is not centering the registration point for the tile. In the tagged version ZIM7 is working fine but in the ZIM10 does not.

Its showing like this: view screenshoot Can you tell me what can i do in order to get the registration point in the center of the tile?

Thanks

danzen commented 5 years ago

Hi Fran, there are a couple things going on.

The outline you are showing is for the whole Tile(). To outline the squares you can loop through the tile and outline each child. BUT... as you do, the outline actually gets added to the Tile as a child. So that means for it to work properly, you need to loop through the tile backwards like so: tile.loop(function (item) {item.outline();}, true); BTW - the red circle on the rectangles is the registration point. The + is the origin (0,0) inside the rectangle.
The example uses pos() and the functionality of pos has changed to position the left and top of the object at the position specified or the right and bottom of the object from the right and bottom of the container if you pass in true, true as the next two parameters. So... in short, the loc() method now does what the pos() method did in earlier versions of ZIM and you would want to use loc() to place the registration point.
Once you change to loc() you will see that the center of the ball goes at the center of the rectangle. But that is probably not what you want if you are viewing it isometrically.... but then just add to the loc() values whatever you think looks good.

danzen commented 4 years ago

PS - center(), centerReg() and pos() have been slightly overhauled with respect to adding to containers with no bounds and adding objects with no bounds as of ZIM 10.7.1. See https://zimjs.com/updates.html for more.

danzen / zimjs

centerReg() does not working on ZimJS version 10 #31