Source code:
<div>
<div id="output"></div>
<canvas id="mycanvas" style="width:100%; height:200px;"></canvas>
</div>
fire.require(
function(){
var prj1 = new fire.cad.project.Project("mycanvas");
prj1.addLayer("Layer1");
prj1.setBgColor("red");
var ls = new fire.gear.geom.LineString([
new fire.gear.geom.Coordinate(50,40),
new fire.gear.geom.Coordinate(50,80),
new fire.gear.geom.Coordinate(70,80),
new fire.gear.geom.Coordinate(70,40)
]);
var sh = new fire.gear.geom.LinearRing([
new fire.gear.geom.Coordinate(100,40),
new fire.gear.geom.Coordinate(100,80),
new fire.gear.geom.Coordinate(140,80),
new fire.gear.geom.Coordinate(140,40),
new fire.gear.geom.Coordinate(100,40)
]);
var hl = new fire.gear.geom.LinearRing([
new fire.gear.geom.Coordinate(110, 50),
new fire.gear.geom.Coordinate(110, 70),
new fire.gear.geom.Coordinate(130, 70),
new fire.gear.geom.Coordinate(130, 50),
new fire.gear.geom.Coordinate(110, 50)
]);
var pg = new fire.gear.geom.Polygon(sh,[hl]);
var ov = fire.cad.projects.get(0).getOverLayer();
ov.addChildren([ls,pg]);
var polygon_filter = fire.gear.geom.Filter.IsPolygon()
var pg_group = ov.group.filter(polygon_filter);
var founded_pg = pg_group.first();
founded_pg.setSelected(true);
founded_pg.p_geom.onMouseEnter = function(event) {
this.fillColor = 'red';
}
founded_pg.p_geom.onMouseLeave = function(event) {
this.fillColor = 'white';
}
}, {
modules : [fire.Modules.CAD]
,mode : fire.Mode.BUILD
,otherScripts: []
,relative: "../lib/fire/"
}
);