Merge pull request #4659 from bartvde/drawimage-safari-fix

Make sure icons show up in Safari

src/ol/render/canvas/canvasreplay.js

@@ -349,8 +349,11 @@ ol.render.canvas.Replay.prototype.replay_ = function(
             context.globalAlpha = alpha * opacity;
           }
 
-          context.drawImage(image, originX, originY, width, height,
-              x, y, width * pixelRatio, height * pixelRatio);
+          var w = (width + originX > image.width) ? image.width - originX : width;
+          var h = (height + originY > image.height) ? image.height - originY : height;
+
+          context.drawImage(image, originX, originY, w, h,
+              x, y, w * pixelRatio, h * pixelRatio);
 
           if (opacity != 1) {
             context.globalAlpha = alpha;

test_rendering/spec/ol/data/me0.svg

@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   version="1.1"
+   id="Layer_1"
+   x="0px"
+   y="0px"
+   width="512px"
+   height="512px"
+   viewBox="0 0 512 512"
+   enable-background="new 0 0 512 512"
+   xml:space="preserve"
+   inkscape:version="0.48.4 r9939"
+   sodipodi:docname="me0.svg"><metadata
+   id="metadata3776"><rdf:RDF><cc:Work
+       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
+         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
+   id="defs3774" /><sodipodi:namedview
+   pagecolor="#ffffff"
+   bordercolor="#666666"
+   borderopacity="1"
+   objecttolerance="10"
+   gridtolerance="10"
+   guidetolerance="10"
+   inkscape:pageopacity="0"
+   inkscape:pageshadow="2"
+   inkscape:window-width="1024"
+   inkscape:window-height="1258"
+   id="namedview3772"
+   showgrid="false"
+   inkscape:zoom="0.4609375"
+   inkscape:cx="309.13338"
+   inkscape:cy="256"
+   inkscape:window-x="1016"
+   inkscape:window-y="-8"
+   inkscape:window-maximized="1"
+   inkscape:current-layer="Layer_1" />
+
+<g
+   id="g3754"
+   style="fill:#085095;fill-opacity:1;stroke:#ffffff;stroke-opacity:1;stroke-width:25;stroke-miterlimit:4;stroke-dasharray:none;stroke-linejoin:round;stroke-linecap:round"><path
+     style="stroke:#ffffff;stroke-width:25;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill:#085095;fill-opacity:1;stroke-linejoin:round;stroke-linecap:round"
+     id="path3770"
+     d="m 256,25.6 c -95.4279,0 -172.8,77.3721 -172.8,172.8 0,95.4279 144,288 172.8,288 28.8,0 172.8,-192.5721 172.8,-288 C 428.8,102.9721 351.4279,25.6 256,25.6 z m 0,288 c -63.5346,0 -115.2,-51.6942 -115.2,-115.2 0,-63.5058 51.6654,-115.2 115.2,-115.2 63.5346,0 115.2,51.6942 115.2,115.2 0,63.5058 -51.6654,115.2 -115.2,115.2 z"
+     inkscape:connector-curvature="0" /><polygon
+     style="fill:#085095;stroke:#ffffff;stroke-width:69.44444444;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;fill-opacity:1"
+     transform="matrix(0.36,0,0,0.36,160.72934,103.79972)"
+     id="polygon3"
+     points="374.185,309.08 401.33,467.31 259.216,392.612 117.104,467.31 144.25,309.08 29.274,197.007 188.165,173.919 259.216,29.942 330.27,173.919 489.16,197.007 "
+     stroke-miterlimit="10" /></g></svg>

test_rendering/spec/ol/style/icon.test.js

@@ -4,8 +4,17 @@ describe('ol.rendering.style.Icon', function() {
 
   var target, map, vectorSource;
 
-  function createMap(renderer) {
-    target = createMapDiv(50, 50);
+  var imgInfo = {
+    anchor: [0.5, 46],
+    anchorXUnits: 'fraction',
+    anchorYUnits: 'pixels',
+    opacity: 0.75,
+    scale: 0.5,
+    imgSize: [32, 48]
+  };
+
+  function createMap(renderer, width, height) {
+    target = createMapDiv(width ? width : 50, height ? height : 50);
 
     vectorSource = new ol.source.Vector();
     var vectorLayer = new ol.layer.Vector({
@@ -30,7 +39,7 @@ describe('ol.rendering.style.Icon', function() {
       disposeMap(map);
     });
 
-    function createFeatures(callback) {
+    function createFeatures(src, imgInfo, callback) {
       var feature;
       feature = new ol.Feature({
         geometry: new ol.geom.Point([0, 0])
@@ -38,35 +47,63 @@ describe('ol.rendering.style.Icon', function() {
 
       var img = new Image();
       img.onload = function() {
+        imgInfo.img = img;
         feature.setStyle(new ol.style.Style({
-          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
-            anchor: [0.5, 46],
-            anchorXUnits: 'fraction',
-            anchorYUnits: 'pixels',
-            opacity: 0.75,
-            scale: 0.5,
-            img: img,
-            imgSize: [32, 48]
-          }))
+          image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ (imgInfo))
         }));
         vectorSource.addFeature(feature);
         callback();
       };
-      img.src = 'spec/ol/data/icon.png';
+      img.src = src;
     }
 
     it('tests the canvas renderer', function(done) {
       map = createMap('canvas');
-      createFeatures(function() {
+      createFeatures('spec/ol/data/icon.png', imgInfo, function() {
         expectResemble(map, 'spec/ol/style/expected/icon-canvas.png',
             IMAGE_TOLERANCE, done);
       });
     });
 
+    it('scales svg correctly in the canvas renderer', function(done) {
+      map = createMap('canvas', 512, 512);
+      createFeatures('spec/ol/data/me0.svg', {
+        scale: 96 / 512,
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'spec/ol/style/expected/icon-canvas-svg-scale.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('uses offset correctly in the canvas renderer', function(done) {
+      map = createMap('canvas', 256, 512);
+      createFeatures('spec/ol/data/me0.svg', {
+        offset: [0, 256],
+        size: [256, 256],
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'spec/ol/style/expected/icon-canvas-svg-offset.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
+    it('uses offset correctly if it is larger than size in the canvas renderer', function(done) {
+      map = createMap('canvas', 256, 512);
+      createFeatures('spec/ol/data/me0.svg', {
+        offset: [0, 374],
+        size: [256, 256],
+        imgSize: [512, 512]
+      }, function() {
+        expectResemble(map, 'spec/ol/style/expected/icon-canvas-svg-offset2.png',
+            IMAGE_TOLERANCE, done);
+      });
+    });
+
     it('tests the WebGL renderer', function(done) {
       assertWebGL();
       map = createMap('webgl');
-      createFeatures(function() {
+      createFeatures('spec/ol/data/icon.png', imgInfo, function() {
         expectResemble(map, 'spec/ol/style/expected/icon-webgl.png',
             2.0, done);
       });