Regression on Drawing Rectangle with RenderEvent.context (Rotating the Map) about openlayers HOT 7 CLOSED

@ismailsunni Your sandboxes are private, so I cannot view them. Anyway, I think this issue is the same as #15680. If so, it is fixed already in ol@dev.

from openlayers.

I managed to access the v9.0.0 sandbox. It is not the same issue as #15680. You should use getRenderPixel as in https://openlayers.org/en/latest/examples/layer-swipe.html to calculate your pixel positions instead of assuming the orientation of the canvas.

from openlayers.

hi @ahocevar thanks for the reply.

I have tried with ol@dev, but it still has similar issue (although different in term of how it move). I have the sandbox for ol@dev here.

I also have fixed the links to the sandboxes in my issue above so you can access it (there was a typo in the URL).

Some gif for illustration:
OL v9.0.0 (normal):

OL v9.1.0 (bug)

OL v9.1.1-dev.1715581613988 (bug):

from openlayers.

hi @mike-000
thanks, your hint seems promising. I will try tomorrow.

But, it seems there is some changes in 9.1.0 that create the regresion. Because previously I don't need to do anything more to make it work.

from openlayers.

it seems there is some changes in 9.1.0

Yes, the vector layer now shares a canvas with the tile layer, which rotates as the view rotates.

Even before that change your example could have worked without a vector layer, you could have applied the postrender processing directly to the tile layer using getRenderPixel to calculate the pixel positions.

from openlayers.

@ismailsunni Here is the postrender code that will work with any layer in any version:

layer.on('postrender', function (event) {
  const context = event.context;
  const size = map.getSize();
  const [width, height] = size;
  const [minx, miny] = size.map((n) => n * 0.25);
  const [maxx, maxy] = size.map((n) => n * 0.75);

  context.save();
  context.beginPath();
  // Outside polygon, must be clockwise
  context.moveTo(...getRenderPixel(event, [0, 0]));
  context.lineTo(...getRenderPixel(event, [width, 0]));
  context.lineTo(...getRenderPixel(event, [width, height]));
  context.lineTo(...getRenderPixel(event, [0, height]));
  // Inner polygon, must be counter-clockwise
  context.moveTo(...getRenderPixel(event, [minx, miny]));
  context.lineTo(...getRenderPixel(event, [minx, maxy]));
  context.lineTo(...getRenderPixel(event, [maxx, maxy]));
  context.lineTo(...getRenderPixel(event, [maxx, miny]));

  context.closePath();
  context.fillStyle = 'rgba(0, 5, 25, 0.75)';
  context.fill();
  context.restore();
});

See it live: https://codesandbox.io/p/sandbox/print-rectangle-ol-9-1-1-dev-forked-fm5vph

@mike-000's advice to always use getRenderPixel() when drawing to a canvas in a postrender event is correct.

Your code worked by chance in v9.0.0, because it played well with internal implementation details by that time. This isn't a regression or a bug in OpenLayers, but apologies for the internal change that broke your code.

from openlayers.

Thanks @ahocevar and @mike-000
using getRenderPixel works!

Best regards.

from openlayers.