This project is based on canvas HTML5 basic poligon drawing.
- add marker.
- delete marker.
- find marker.
- move marker.
- index1.html -> creates basic rectangle;
- index2.html -> creates many rectangles;
- index3.html -> Implemented picking function to edit the rectangle vertexes.
- index4.html -> It creates a new vertex in the nearest segment when the user clicks on the canvas.
- index5.html -> Select the polygon between many polygons. Picking
- twitter bootstrap (only for the css visualization), better look :).
- Google Chrome Versión 31.0.1650.57 m
- Version 55.0.2883.87 (64-bit) ubuntu.
- Firefox
- if you haven't apache server, please install (Xammp, MAMAP, XAMPP, apache server 2.0)
- just copy canvasHTML folder.
var canvasDiv="viewport";
var canvasContext; //canvas 2D context:
var canvasObject; //canvas dom element
var renderObject; //render class
$(document).ready(function()
{
canvasContext=document.getElementById(canvasDiv).getContext("2d");
//markerObject=new MarkerHandler();
cuadObject=new Shape();
renderObject=new RenderHandler(canvasContext);
canvasObject=document.getElementById(canvasDiv);
renderObject.setViewWidth(canvasObject.width);
renderObject.setViewHeight(canvasObject.height);
cuadObject.createRectangle(canvasObject.width/2-50,canvasObject.height/2-50,100,100);
renderObject.addRenderElement(cuadObject);
setInterval(render,10);
- delete Point: when some marker is deleted, the dropdown menu doesn't stop de propagation.
- add New Point: id doesn't work fine, when some marker is added it isn't always added between 2 nearest markers.
Unai Elordi