drawing 2.0.5-beta10
Install from the command line:
Learn more about npm packages
$ npm install @spoonconsulting/drawing@2.0.5-beta10
Install via package.json:
"@spoonconsulting/drawing": "2.0.5-beta10"
About this version
- Clone the repository
npm install
npm run build
This will generate drawing.min.js
which is ready to be used in your web page.
Execute npm run start
to launch the development server with livereload.
const drawingExperience = await DrawingExperience.create(background, {
inputSvg: '<svg xmlns="http://www.w3.org/2000/svg">...</svg>
contextMenu: false,
actions: [
{
id: "save",
icon: "M433.1 129.1l-83.9-83.9C342.3 38.32 327.1 32 316.1 32H64C28.65 32 0 60.65 0 96v320c0 35.35 28.65 64 64 64h320c35.35 0 64-28.65 64-64V163.9C448 152.9 441.7 137.7 433.1 129.1zM224 416c-35.34 0-64-28.66-64-64s28.66-64 64-64s64 28.66 64 64S259.3 416 224 416zM320 208C320 216.8 312.8 224 304 224h-224C71.16 224 64 216.8 64 208v-96C64 103.2 71.16 96 80 96h224C312.8 96 320 103.2 320 112V208z",
label: "Save",
action: () => {
alert("DOWNLOAD ANNOTATION !!");
},
},
{
id: "close",
icon: "m406.59 361.4c12.5 12.5 12.5 32.75 0 45.25-6.2 6.25-14.4 9.35-22.6 9.35s-16.38-3.125-22.62-9.375l-105.38-105.32-105.37 105.3c-6.25 6.3-14.44 9.4-22.63 9.4s-16.37-3.1-22.625-9.4c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4-105.4-105.35c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l105.38 105.45 105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4z",
label: "Close",
action: () => {
drawingExperience.destroy();
},
},
],
});
cosnt svg = drawingExperience.drawing.export();
console.log(svg);
cosnt svg = drawingExperience.export();
console.log(svg);
var markerExperience = drawingExperience.markerExperience;
console.log(markerExperience.export());
console.log(markerExperience.jsonToSVG(markerExperience.export()));
console.log(drawingExperience.export());
console.log(drawingExperience.jsonToSVG(drawingExperience.export()));
export() - Get SVG with updatedAt svgToJSON() - Convert SVG to JSON jsonToSVG() - Convert JSON to SVG
inputSvg - Text SVG as Input. Can be used if you have a foreground svg to display on top of background
(Optional)
container - Container to append Drawing (Optional)
sizeMenu - Shows size menu(True/False) (False by default) (Optional)
contextMenu - Shows context menu(True/False) (False by default) (Optional)
toolMenu - Shows tool menu(True/False) (True by default) (Optional)
colorMenu - Shows color menu(True/False) (False by default) (Optional)
undoRedo - Shows undo redo menu(True/False) (False by default) (Optional)
gridMenu - Shows grid menu(True/False) (False by default) (Optional)
commentsMenu - Show comment menu(True/False or Object(with readOnly)) (False by default) (Optional)
commentsMenu: false
// OR
commentsMenu: {
readOnly: true
}
tools - Add tools to tool menu (Optional)
tools: [
"path",
"line",
"circle",
"rect",
"marker",
"double-arrow"
]
- Add tool with options
tools: [
"path",
{
type: "text",
textStyleBold: true,
textStyleUnderline: true,
textStyleFontFamily: "monospace",
},
{
name: "circle",
type: "circle",
colors: "#00ff00",
lineStyle: "dashed",
gridSize: [100, 100, 100, 100],
},
{
name: "circleRed",
type: "circle",
colors: "#ff0000",
size: 10,
},
{
name: "highlighter",
type: "path",
colors: "#f1c40f60",
size: 80,
iconUrl: `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAY...`,
},
]
- Adding stickers
tools: [
...,
"double-arrow",
{
"name": "sticker",
"width": 426,
"height": 426,
"scale": 1,
"dataUrl": `data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iM...`,
},
...
]
edits - Add edit tools to tool menu (Optional)
edits: [
"marker",
"double-arrow"
]
colors - Add custom colors to color menu (Optional)
colors: [
{ name: "red", colors: "#e74c3c" },
{ name: "redFilled", colors: ["#e74c3c", "#e74c3c66"] },
{ name: "redOpaque", colors: ["#e74c3c", "#e74c3cff"] },
{ name: "redTransparent", colors: "#e74c3c20" },
{ name: "orange", colors: "#f39c12" },
{ name: "green", colors: "#2ecc71" },
{ name: "greenTransparent", colors: "#2ecc7120" },
{ name: "blue", colors: "#3498db" },
{ name: "blueTransparent", colors: "#3498db20" },
{ name: "purple", colors: "#8e44ad" },
{ name: "pink", colors: "#fc6ffc" },
{ name: "yellow", colors: "#f1c40f" },
{ name: "white", colors: "#ecf0f1" },
{ name: "black", colors: "#2c3e50" },
],
actions - Shows drawing actions (Optional)
actions: [
{
id: "save",
icon: "", // path of icon
label: "Save",
action: () => {
alert("DOWNLOAD ANNOTATION !!");
},
},
{
id: "download",
icon: "", // path of icon
label: "Close",
action: () => {
drawingExperience.destroy();
},
},
],
resizeElementsOnZoom - Enable resizing of elements when zooming on canvas (This is currently only done for markers) (True/False) (False by default)
promptText - Setup custom parameters and metrics for prompt text menu
promptText: {
metrics: ["mm", "cm", "m"]
},
See static/preview.html
for an example usage.
More to come.
Details
- drawing
- spoonconsulting
- 6 months ago
- MIT
- 51 dependencies
Assets
- drawing-2.0.5-beta10.tgz
Download activity
- Total downloads 0
- Last 30 days 0
- Last week 0
- Today 0