Проблема с вращением слоя с помощью компоновки крючков

Я разрабатываю инструмент для поворота статического слоя изображения, и в настоящее время я сталкиваюсь с проблемой на мобильном устройстве.Проблема с вращением слоя с помощью компоновки крючков

Статический слой изображения должен вращаться вокруг определенной точки. Я использую precompose и postcompose hooks, чтобы изменить холст и сделать поворот. Он отлично работает на рабочем столе, но я не понимаю, что происходит на мобильном устройстве (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)

На рабочем столе, изображение правильно вращаться вокруг точки. Перетащите карту: точка и изображение следуют по карте. На мобильном изображении изображение не вращается правильно вокруг точки, оно сделано вокруг начала холста, переводы холста выглядят не очень хорошо. Перетащите карту, чтобы посмотреть хаос :)

источник

2016-09-28 TeChn4K

При выполнении преобразований вам необходимо учитывать соотношение пикселей. Пиксели, которые вы получаете от map.getPixelFromCoordinate, являются пикселями css. Чтобы получить холст пикселей, вам нужно умножить их на 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.

источник

2016-09-28 12:43:12 ahocevar

Если вы заинтересованы в составлении изображений на карте OL3, посмотрите на ol.source.GeoImage я опубликован на GitHub: http://viglino.github.io/ol3-ext/examples/map.geoimage.html

С вашего примера: https://jsfiddle.net/Viglino/cqL17a3y/

/* Init image layer */ 
const imgLayer = new ol.layer.Image({ 
    opacity: 0.7, 
    source: new ol.source.GeoImage({ 
     url: "https://pbs.twimg.com/profile_images/685220121598660608/2uZUdcS1.jpg", 
     imageCenter: center, 
      imageScale: [1,1], 
      imageRotate: rotation*Math.PI/180, 
      projection: 'EPSG:3857', 
    }) 
})

С уважением

источник

2016-10-14 15:11:51

Проблема с вращением слоя с помощью компоновки крючков

ответ

Смежные вопросы