Adds SVG drawing capability (rectangles, circles, ellipses and polygons) on top of your image to let you make image maps
npm install @overlapmedia/imagemapper
$ npm install @overlapmedia/imagemapper
`
`js
// Use imagemapper.editor or editor
import imagemapper, { editor, view } from '@overlapmedia/imagemapper';
// Editor
const myEditor = imagemapper.editor('editor', {
width: 800,
height: 400,
selectModeHandler: () => console.log('Editor is now in select mode'),
componentDrawnHandler: (component, componentId) => {
// Disabling changes on new components. If you are making a design collaboration tool you probably want
// to do this on components returned by the import function (meaning all existing components you are importing)
// and let all other components drawn by the user respond to changes.
component.freeze();
console.log(
Disabled selecting, deleting, resizing and moving on component with id ${componentId},
);
},
});
myEditor.loadImage('image.svg', 700, 350);
myEditor.on('mouseup', (e) => console.log('mouseup event', e));
myEditor.polygon(); // Let user draw polygons
// View
const myView = view('view', {
width: 800,
height: 400,
viewClickHandler: (e, id) => console.log('User clicked on', id),
});
myView.loadImage('image.png', 700, 350);
myView.import(
'{"idCounter":4,"components":[{"id":"rect_1","type":"rect","data":{"x":66,"y":36,"width":253,"height":148}},{"id":"polygon_2","type":"polygon","data":[{"x":376,"y":172},{"x":498,"y":291},{"x":625,"y":174},{"x":500,"y":57}]},{"id":"polygon_3","type":"polygon","data":[{"x":54,"y":249},{"x":234,"y":246},{"x":236,"y":225},{"x":415,"y":270},{"x":237,"y":313},{"x":235,"y":294},{"x":54,"y":292}]}]}',
);
`
$3
`html
``