2018-05-28 08:29:05 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8" />
|
|
|
|
|
<title>Minimal demo of SvgCanvas</title>
|
2020-08-04 07:18:31 +00:00
|
|
|
<script src="../src/editor/jquery.min.js"></script>
|
2018-05-28 08:29:05 +00:00
|
|
|
<style> #svgroot { overflow: hidden; } </style>
|
2021-05-15 19:53:22 +00:00
|
|
|
<link rel="shortcut icon" type="image/x-icon" href="../src/editor/images/logo.svg" />
|
2018-05-28 08:29:05 +00:00
|
|
|
</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>
|
2021-11-22 09:56:38 +00:00
|
|
|
<button onclick="canvas.setMode('rect')">Rect</button>
|
|
|
|
|
<button onclick="canvas.setMode('text')">Text</button>]
|
2018-05-28 08:29:05 +00:00
|
|
|
<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>
|
2021-11-22 09:56:38 +00:00
|
|
|
<!-- Not visible, but useful -->
|
|
|
|
|
<input id="text" style="width:0;height:0;opacity: 0"/>
|
2018-05-28 08:29:05 +00:00
|
|
|
<script type="module">
|
2019-07-02 04:21:21 +00:00
|
|
|
/* globals canvas */
|
2020-07-30 12:21:16 +00:00
|
|
|
import SvgCanvas from '../src/svgcanvas/svgcanvas.js';
|
2018-05-28 08:29:05 +00:00
|
|
|
|
|
|
|
|
const container = document.querySelector('#editorContainer');
|
2021-05-12 23:00:09 +00:00
|
|
|
const { width, height } = { width: 500, height: 300 };
|
2018-05-28 08:29:05 +00:00
|
|
|
window.width = width;
|
|
|
|
|
window.height = height;
|
|
|
|
|
|
2021-11-22 09:56:38 +00:00
|
|
|
const hiddenTextTagId = "text";
|
|
|
|
|
|
2018-05-28 08:29:05 +00:00
|
|
|
const config = {
|
2021-05-12 23:00:09 +00:00
|
|
|
initFill: { color: 'FFFFFF', opacity: 1 },
|
|
|
|
|
initStroke: { color: '000000', opacity: 1, width: 1 },
|
|
|
|
|
text: { stroke_width: 0, font_size: 24, font_family: 'serif' },
|
2018-05-28 08:29:05 +00:00
|
|
|
initOpacity: 1,
|
2021-08-13 12:37:55 +00:00
|
|
|
imgPath: '../src/editor/images',
|
2021-05-12 23:00:09 +00:00
|
|
|
dimensions: [ width, height ],
|
2019-07-02 04:21:21 +00:00
|
|
|
baseUnit: 'px'
|
2018-05-28 08:29:05 +00:00
|
|
|
};
|
|
|
|
|
|
2018-11-22 00:53:09 +00:00
|
|
|
window.canvas = new SvgCanvas(container, config);
|
2018-05-28 08:29:05 +00:00
|
|
|
canvas.updateCanvas(width, height);
|
|
|
|
|
|
|
|
|
|
window.fill = function (colour) {
|
2021-12-25 20:25:12 +00:00
|
|
|
canvas.getSelectedElements().forEach((el) => {
|
2018-05-28 08:29:05 +00:00
|
|
|
el.setAttribute('fill', colour);
|
|
|
|
|
});
|
|
|
|
|
};
|
2021-11-22 09:56:38 +00:00
|
|
|
|
2021-11-22 10:52:18 +00:00
|
|
|
const hiddenTextTag = window.canvas.$id(hiddenTextTagId);
|
2021-11-22 09:56:38 +00:00
|
|
|
window.canvas.textActions.setInputElem(hiddenTextTag);
|
|
|
|
|
|
|
|
|
|
const addListenerMulti = (element, eventNames, listener)=> {
|
|
|
|
|
eventNames.split(' ').forEach((eventName)=> element.addEventListener(eventName, listener, false));
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
addListenerMulti(hiddenTextTag, 'keyup input', (evt) => {
|
|
|
|
|
window.canvas.setTextContent(evt.currentTarget.value);
|
|
|
|
|
});
|
|
|
|
|
|
2018-05-28 08:29:05 +00:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
