javascript - rectangulo - El relleno de función de abrir capas 3 con el lienzo no está fijado a la función
dibujar un triangulo en javascript (1)
He estado trabajando con openlayers 3 y openlayers 3 creado un relleno con canvasPattern . El relleno funciona, el problema es que no funciona como se esperaba.
Esperaría que el relleno se moviera con la geometría que está llenando, pero como verán en este ejemplo:
http://fiddle.jshell.net/luigibosca/Lwrbuxfd/14/
si mueves el mapa, notarás que el relleno está absolutamente posicionado, y no relativo a la geometría que llena.
- ¿Estoy usando el relleno incorrecto?
- ¿Alguien sabe cómo llenar el relleno para moverse con la geometría?
¡Gracias de antemano por cualquier ayuda!
Por lo que puedo ver, no hay forma de hacer que el origen del patrón de relleno siga el mapa o la geometría mientras se desplaza o mueve cuando se usa con capas vectoriales. Openlayers simplemente usa el patrón como el relleno sin traducirlo, por lo que siempre estará posicionado estáticamente en relación con el lienzo.
Sin embargo, PR # 5854 introduce un ejemplo donde funciona. Todavía no se encuentra en la página de ejemplos, pero se puede ver en http://jsfiddle.net/61b7szjn/ .
La diferencia entre esto y su ejemplo es que usa una fuente ImageVector (lo que la convierte en una capa de Imagen). Hacer eso lo haría funcionar, como en su ejemplo :
var imageVectorLayer = new ol.layer.Image({
source: new ol.source.ImageVector({
source: vectorSource,
style: styleFunction
}),
})
El uso de capas de imagen para datos vectoriales puede no ser adecuado para todas las situaciones, por lo que agregar soporte para traducir el patrón de relleno parece ser un excelente material de relaciones públicas.
Editar:
Tras nuevas pruebas, parece que las soluciones ImageVector no son una solución garantizada. El patrón generalmente sigue a lo largo de mi recorrido, pero a veces se mueve a diferentes desplazamientos de formas impredecibles. Supongo que es por la forma en que se recorta el lienzo de la fuente renderizada:
