basicpolycreator's Introduction

BasicPolyCreator

Introduction

This project is based on canvas HTML5 basic poligon drawing.

Features:

add marker.
delete marker.
find marker.
move marker.

Samples:

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

3rdParty libraries:

twitter bootstrap (only for the css visualization), better look :).

It works on:

Google Chrome Versión 31.0.1650.57 m
Version 55.0.2883.87 (64-bit) ubuntu.
Firefox

Try it:

Demo Online

Instalation:

if you haven't apache server, please install (Xammp, MAMAP, XAMPP, apache server 2.0)
just copy canvasHTML folder.

Code Usage:

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);

ISSUES:

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.