Estoy tratando de hacer algo que recorte imágenes como el clip-path css pero con un lienzo. Tengo un mapa de mapbox 3d donde quiero poner esta imagen, como una textura para un plano en tres js, pero primero tengo que recortarla. Tengo una imagen que tiene una forma geojson definida, la parte superior izquierda de la imagen en el mapa, el NE y el SW. Se calculó la esquina SE y luego se formó un polígono, ImageShape en jsfiddle. Lo mismo para el edificio buildingShape , y luego descubrí dónde se cruzaban con el césped y obtuve intersectPoly .

He hecho un intento de hacer esto, y funciona un poco. Si la imagen no se gira funciona perfectamente, pero cuando se gira la imagen en el mapa, no funciona y no puedo entender por qué, cualquiera que tenga alguna idea o alguna forma de resolver esto, ¡ayuda por favor!

https://jsfiddle.net/ha15e2cy/

 const pixelPerLon = canvas.width / Math.abs(topleftOfImage[1] - NEOfImage[1]); const pixelPerLat = canvas.height / Math.abs(topleftOfImage[0] - SWOfImage[0]); for (let i = 0; i < (intersect.geometry.coordinates[0].length - 1); i++) { const coords: any = intersect.geometry.coordinates[0][i]; const xlength = Math.abs(topleftOfImage[0] - coords[0]); const ylength = Math.abs(topleftOfImage[1] - coords[1]); r.lineTo(xlength * pixelPerLon, ylength * pixelPerLat); }

¡Cualquier ayuda apreciada!