recttools-example.js

/* --- title: RectTools example categories: rectangles files: ../point_src/core/head.js ../point_src/pointpen.js ../point_src/pointdraw.js ../point_src/point-content.js ../point_src/pointlistpen.js ../point_src/pointlist.js ../point_src/point.js ../point_src/events.js ../point_src/automouse.js ../point_src/distances.js ../point_src/dragging.js ../point_src/setunset.js ../point_src/stroke.js ../point_src/functions/clamp.js ../point_src/stage.js ../point_src/split.js ../point_src/jiggle.js ../point_src/random.js ../point_src/recttools.js ../point_src/curve-extras.js --- */ const rt = new RectTools(20, 20, 200, 200) // the overspill radius * .5 class MainStage extends Stage { canvas='playspace' mounted(){ let a = this.a = new Point({x:200,y:200, radius: 50, rotation: 0}) let b = this.b = new Point({x:300,y:200, radius: 50, rotation: 0}) this.dragging.add(a, b) this.events.wake() const box = new PointList( new Point(150, 150) , new Point(500, 400) ) this.lines = twoPointBox(...box) this.rectTools = new RectTools( box[0].x, box[0].y , box[1].x, box[1].y ) // testRect() } onClick(){ } draw(ctx){ this.clear(ctx) // this.a.rotation += .5 let a = this.a let color = 'hsl(100deg, 50%, 20%)' if( this.rectTools.containsPoint(a) ){ color = 'hsl(200deg, 100%, 60%)' } a.pen.fill(ctx, color) let b = this.b color = 'hsl(100deg, 50%, 20%)' if( this.rectTools.touchingPoint(b) ){ // if( this.rectTools.hasPoint(b) ){ color = 'hsl(200deg, 100%, 60%)' } b.pen.fill(ctx, color) this.lines.forEach(l=>l.render(ctx, {color: 'red'})) } } ;stage = MainStage.go();