@cruxcode/paintkit
v3.0.0
Published
html5 canvas is used to draw. the drawn picture can be snapped immidiately.
Downloads
782
Readme
This library allows user to draw svg images on any element in the DOM.
For usage related instructions, check below or the examples/ts/main.js file in the repository.
Usage
On importing the main.js, Art object is attached to the window
Art has following properties:
{
Activity,
ActivityConfig,
Shape,
ShapeConfig,
Rect,
Position,
events: {
cruxactivitycomplete,
cruxdragcomplete,
cruxsvgselected,
cruxsvgdeselected,
cruxresizecomplete
}
}There are two kinds of usage, described below as Usage 1 and Usage 2 Usage 1: When you want the user to draw something on the screen Usage 2: When you want to draw something via javascript
Currently, five types of events are thrown:
- cruxactivitycomplete - emitted when user ends drawing activity
- cruxdragcomplete - emitted when user ends the dragging of the shape
- cruxsvgselected - emitted when user selects a shape. It is also thrown at the beginning of drag
- cruxsvgdeselected - emitted when user deselects a shape by clicking elsewhere on the screen
- cruxresizecomplete - emitted when user completes the resize of the shape
Example
Consider the below html.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="radio" id="free" name="shape" value="1">
<label for="free">FREE</label><br>
<input type="radio" id="rect" name="shape" value="2">
<label for="rect">RECT</label><br>
<input type="radio" id="ellipse" name="shape" value="3">
<label for="ellipse">ELLIPSE</label>
<input type="radio" id="circle" name="shape" value="4">
<label for="circle">CIRCLE</label>
<!-- important read here -->
<button onclick="createActivity(event)">Create Activity</button>
<div id="maincontainer">
<!-- focus here -->
<div id="viewcontainer">
<!-- important read here -->
<div class="pagecontainer" id="page1" style="width: 1000px; height: 1000px" data-page-number="1">
</div>
<!-- important read here -->
<div class="pagecontainer" id="page2" style="width: 1000px; height: 1000px" data-page-number="1">
</div>
</div>
</div>
<!-- <script src="svg.js"></script>
<script src="svg.draw.js"></script> -->
<script src="../../dist/es5/bundle.js"></script>
<script src="main.js"></script>
</body>
</html>Usage 1 Create an activity to draw on it An activity starts with mousedown event on the svg created inside the container An activity ends with mouseup event anywhere on the window At the end of the activity, by default, the outer svg element is snapped to the region of drawing You can turn the aut snapping feature off by changing snapToShape property of ActivityConfig to false Once the activity is complete, you need to make it selectable, draggable and resizeable via javascript
function createActivity(event) {
let page1 = document.getElementById("page1"); // the container on which we want to draw
let appConfig = new window.Art.ActivityConfig(); // creating a default activity config
let activity = new window.Art.Activity(page1, 0, appConfig); // creating an activity
activity.run(); // the activity can only be started after running it
}
// listen when user stops drawing
window.addEventListener(window.Art.events.cruxactivitycomplete, (ev) => {
console.log("cruxactivitycomplete listened", ev);
console.log("svg position after activity completed", ev.detail.activity.shape.getSvgPosition());
// make the shape selectable i.e. borders will appear on clicking on the shape
ev.detail.activity.shape.selectable = true;
// make the shape draggable
ev.detail.activity.shape.draggable = true;
// make the shape resizeable
ev.detail.activity.shape.resizeable = true;
});
// listen when drag action completes
window.addEventListener(window.Art.events.cruxdragcomplete, (ev) => {
console.log("cruxdragcomplete listened", ev);
console.log(ev.detail.shape.getSvgPosition());
});
// listen on selection the shape
window.addEventListener(window.Art.events.cruxsvgselected, (ev) => {
console.log("cruxsvgselected listened", ev);
})
// listen on de-selection the shape
window.addEventListener(window.Art.events.cruxsvgdeselected, (ev) => {
console.log("cruxsvgdeselected listened", ev);
});Usage 2
// create svg
document.getElementById("page2").innerHTML = `
<svg width="400" height="110"><rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" /></svg>`;
let svg = document.getElementById("page2").childNodes[1];
// create default shape config object
let shapeConfig = new window.Art.ShapeConfig();
// create a new shape object
let shape = new window.Art.Rect();
// wrap the svg inside the shape object
shape.create(shapeConfig, svg);
// attach the shape to the container
shape.attach(page1, new window.Art.Position(10, 20, 100, 100));
// make the shape selectable i.e. borders will appear on clicking on the shape
shape.selectable = true;
// make the shape draggable
shape.draggable = true;
// make the shape resizeable
shape.resizeable = true;Change CSS
.pagecontainer {
border: 1px solid black;
margin: 10px;
}
.cruxhandlex {
background: repeating-linear-gradient(to right, rgba(0, 0, 255, 0.4) 0,rgba(0, 0, 255, 0.4) 10px,transparent 10px,transparent 15px) center !important;
background-size: 100% 3px !important;
background-repeat: no-repeat !important;
}
.cruxhandley {
background: repeating-linear-gradient(0deg,rgba(0, 0, 255, 0.4) 0,rgba(0, 0, 255, 0.4) 10px,transparent 1px,transparent 15px) repeat-y center top !important;
background-size: 3px 100% !important;
background-repeat: no-repeat !important;
}
.cruxhandlex.cruxselectedhandle {
background: repeating-linear-gradient(to right, rgba(0, 0, 255, 0.8) 0,rgba(0, 0, 255, 0.8) 10px,transparent 10px,transparent 15px) center !important;
background-size: 100% 3px !important;
background-repeat: no-repeat !important;
}
.cruxhandley.cruxselectedhandle {
background: repeating-linear-gradient(0deg,rgba(0, 0, 255, 0.8) 0,rgba(0, 0, 255, 0.8) 10px,transparent 1px,transparent 15px) repeat-y center top !important;
background-size: 3px 100% !important;
background-repeat: no-repeat !important;
}