- Demos: Add svgcanvas demo (Neil Fraser)

2018-05-28 16:29:05 +08:00 · 2018-05-28 16:29:05 +08:00 · 83e3e66ddc
parent 5e8f460f55
commit 83e3e66ddc
1 changed files with 54 additions and 0 deletions
--- a/demos/canvas.html
+++ b/demos/canvas.html
@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Minimal demo of SvgCanvas</title>
+    <script src="../editor/jquery.min.js"></script>
+    <script src="../editor/jquery-ui/jquery-ui-1.8.17.custom.min.js"></script>
+    <style> #svgroot { overflow: hidden; } </style>
+  </head>
+
+  <body>
+    <h1>Minimal demo of SvgCanvas</h1>
+
+    <div id="editorContainer"></div>
+
+    <div>
+      [<button onclick="canvas.setMode('select')">Select</button>
+      <button onclick="canvas.setMode('circle')">Circle</button>
+      <button onclick="canvas.setMode('rect')">Rect</button>]
+      <button onclick="fill('#ff0000')">Fill Red</button>
+      <button onclick="canvas.deleteSelectedElements()">Delete Selected</button>
+      <button onclick="canvas.clear(); canvas.updateCanvas(width, height);">Clear All</button>
+      <button onclick="alert(canvas.getSvgString())">Get SVG</button>
+    </div>
+
+    <script type="module">
+import Canvas from '../editor/svgcanvas.js';
+
+const container = document.querySelector('#editorContainer');
+const {width, height} = {width: 500, height: 300};
+window.width = width;
+window.height = height;
+
+const config = {
+  initFill: {color: 'FFFFFF', opacity: 1},
+  initStroke: {color: '000000', opacity: 1, width: 1},
+  text: {stroke_width: 0, font_size: 24, font_family: 'serif'},
+  initOpacity: 1,
+  imgPath: 'editor/images/',
+  dimensions: [width, height],
+  baseUnit: 'px',
+};
+
+window.canvas = new Canvas(container, config);
+canvas.updateCanvas(width, height);
+
+window.fill = function (colour) {
+  canvas.getSelectedElems().forEach((el) => {
+    el.setAttribute('fill', colour);
+  });
+};
+    </script>
+  </body>
+</html>