Port render-toContext rendering test

2018-11-14 17:49:23 +01:00
parent 50ae34fcc6
commit 6e964c7934
12 changed files with 96 additions and 210 deletions
--- a/rendering/cases/render-toContext/expected.png
+++ b/rendering/cases/render-toContext/expected.png
--- a/rendering/cases/render-toContext/index.html
+++ b/rendering/cases/render-toContext/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <style>
+      html, body {
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="canvas"></canvas>
+    <script src="main.js"></script>
+  </body>
+  </script>
+</html>
--- a/rendering/cases/render-toContext/main.js
+++ b/rendering/cases/render-toContext/main.js
@@ -0,0 +1,77 @@
+import LineString from '../../../src/ol/geom/LineString.js';
+import Point from '../../../src/ol/geom/Point.js';
+import Polygon from '../../../src/ol/geom/Polygon.js';
+import {toContext} from '../../../src/ol/render.js';
+import CircleStyle from '../../../src/ol/style/Circle.js';
+import Fill from '../../../src/ol/style/Fill.js';
+import Stroke from '../../../src/ol/style/Stroke.js';
+import Style from '../../../src/ol/style/Style.js';
+
+const canvas = document.getElementById('canvas');
+const vectorContext = toContext(canvas.getContext('2d'), {
+  pixelRatio: 1,
+  size: [200, 200]
+});
+
+vectorContext.setStyle(new Style({
+  image: new CircleStyle({
+    fill: new Fill({
+      color: 'green'
+    }),
+    radius: 10
+  })
+}));
+vectorContext.drawGeometry(new Point([100, 100]));
+
+vectorContext.setStyle(new Style({
+  stroke: new Stroke({
+    lineCap: 'butt',
+    color: 'red',
+    width: 14
+  })
+}));
+vectorContext.drawGeometry(new LineString([
+  [10, 60], [30, 40], [50, 60], [70, 40], [90, 60]
+]));
+
+vectorContext.setStyle(new Style({
+  stroke: new Stroke({
+    lineJoin: 'bevel',
+    lineCap: 'butt',
+    color: '#111',
+    width: 14
+  })
+}));
+vectorContext.drawGeometry(new LineString([
+  [10, 140], [30, 120], [50, 140], [70, 120], [90, 140]
+]));
+
+
+vectorContext.setStyle(new Style({
+  stroke: new Stroke({
+    color: 'blue',
+    width: 6
+  }),
+  fill: new Fill({
+    color: 'rgba(0,0,255,0.5)'
+  })
+}));
+
+vectorContext.drawGeometry(new Polygon([
+  [[125, 25], [175, 25], [175, 75], [125, 75], [125, 25]],
+  [[140, 40], [140, 60], [160, 60], [160, 40], [140, 40]]
+]));
+
+vectorContext.setStyle(new Style({
+  stroke: new Stroke({
+    lineDash: [10, 5],
+    lineDashOffset: 5
+  })
+}));
+
+vectorContext.drawGeometry(new Polygon([
+  [[125, 125], [175, 125], [175, 175], [125, 175], [125, 125]],
+  [[140, 140], [140, 160], [160, 160], [160, 140], [140, 140]]
+]));
+
+render();