javascript - 通过 compose hooks 层旋转问题

Question

我正在开发一种工具来旋转静态图像层，但我目前在移动设备上遇到了问题。

静态图像层必须围绕特定点旋转。我使用预合成和后合成 Hook 来改变 Canvas 并进行旋转。它在桌面上运行良好，但我不明白移动设备(Android Chrome 或 FF)上发生了什么。

jsFiddle:https://jsfiddle.net/wuty2m9v/7/

/* Vars */
const center = ol.proj.transform([1.44, 43.603], "EPSG:4326", "EPSG:3857")
const imgSize = [400, 267]
const imgExtent = [center[0], center[1], center[0] + imgSize[0], center[1] + imgSize[1]]
let rotation = 45

/* Init map */
const map = new ol.Map({
    target: 'map',
    view: new ol.View({
    zoom: 16,
    center,
  }),
  layers: [
    // Map tiles layer
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    // Feature layer
    new ol.layer.Vector({
        source: new ol.source.Vector({
        features: [
          new ol.Feature({
            geometry: new ol.geom.Point(center),
          }),
        ],
      }),
    }),
  ],
})

/* Init image layer */
const imgLayer = new ol.layer.Image({
  opacity: 0.7,
  source: new ol.source.ImageStatic({
    url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg",
    imageExtent: imgExtent,
  })
})
imgLayer.on("precompose", evt => {
  const pixel = map.getPixelFromCoordinate(center)
  const ctx = evt.context
  ctx.save()
  ctx.translate(pixel[0], pixel[1])
  ctx.rotate(rotation * Math.PI / 180)
  ctx.translate(-pixel[0], -pixel[1])
})
imgLayer.on("postcompose", evt => {
  const ctx = evt.context
  ctx.restore()
})
map.addLayer(imgLayer)

在桌面上，图像围绕该点正确旋转。拖动 map :点和图像跟随 map 。在移动设备上，图像没有围绕该点正确旋转，它是围绕 Canvas 原点制作的， Canvas 平移看起来不太好。拖动 map 看乱象:)

Answer 1

在进行变换时，您需要考虑像素比率。您从 map.getPixelFromCoordinate 获得的像素是 css 像素。要获得 Canvas 像素，您需要将它们乘以 ol.has.DEVICE_PIXEL_RATIO:

ctx.translate(pixel[0] * ol.has.DEVICE_PIXEL_RATIO, pixel[1] * ol.has.DEVICE_PIXEL_RATIO);

和

ctx.translate(-pixel[0] * ol.has.DEVICE_PIXEL_RATIO, -pixel[1] * ol.has.DEVICE_PIXEL_RATIO);

参见 https://jsfiddle.net/wuty2m9v/8/获取 JSFiddle 的更新版本。