i'm trying create speech bubble fabricjs integrate wordpress plugin (hopefully) release free helps people annotate images, found original bubble here on here: speech buble html5 canvas js i'm having few issues , little unsure how go solving them (i'll keep trying , post solution here in case).
fabric.speechbubble = fabric.util.createclass(fabric.object, fabric.observable, { type: 'speechbubble', initialize: function(options) { options || (options = {}); this.callsuper('initialize', options); this.set('width', options.width || 200); this.set('height', options.height || 100); this.set('left', options.left || 100); this.set('top', options.top || 100); this.set('radius', options.radius || 20); this.set('pointerx', options.pointerx || this.left + 300); this.set('pointery', options.pointery || this.top + 300); }, toobject: function() { return fabric.util.object.extend(this.callsuper('toobject'), { pointerx : this.get('pointerx'), pointery : this.get('pointery'), }); }, _render: function (ctx) { //this.callsuper('_render', ctx); var r = this.left + this.width; var b = this.top + this.height; if ( this.pointery < this.top || this.pointery > this.top + this.height ) { var con1 = math.min(math.max(this.left + this.radius, this.pointerx - 10),r-this.radius-20); var con2 = math.min(math.max(this.left + this.radius + 20,this.pointerx + 10),r-this.radius); } else { var con1 = math.min(math.max(this.top + this.radius, this.pointery - 10),b-this.radius-20); var con2 = math.min(math.max(this.top + this.radius + 20, this.pointery + 10),b-this.radius); } var dir; if ( this.pointery < this.top ) dir = 2; if ( this.pointery > this.top) dir = 3; if ( this.pointerx < this.left && this.pointery >= this.top && this.pointery <=b ) dir = 0; if ( this.pointerx > this.left && this.pointery >= this.top && this.pointery <=b ) dir = 1; if ( this.pointerx >= this.left && this.pointerx <= r && this.pointery >= this.top && this.pointery <= b) dir = -1; ctx.beginpath(); ctx.save(); console.log(dir); ctx.strokestyle = "red"; ctx.linewidth = "3"; ctx.fillstyle = "white"; ctx.moveto(this.left + this.radius, this.top); if(dir == 2){ ctx.lineto(con1,this.top); ctx.lineto(this.pointerx,this.pointery); ctx.lineto(con2,this.top); ctx.lineto(r-this.radius,this.top); } else ctx.lineto(r-this.radius,this.top); ctx.quadraticcurveto(r,this.top,r,this.top+this.radius); if(dir == 1){ ctx.lineto(r,con1); ctx.lineto(this.pointerx,this.pointery); ctx.lineto(r,con2); ctx.lineto(r,b-this.radius); } else ctx.lineto(r,b-this.radius); ctx.quadraticcurveto(r, b, r - this.radius, b); if(dir==3){ ctx.lineto(con2,b); ctx.lineto(this.pointerx,this.pointery); ctx.lineto(con1,b); ctx.lineto(this.left+this.radius,b); } else ctx.lineto(this.left+this.radius,b); ctx.quadraticcurveto(this.left, b, this.left, b-this.radius); if(dir==0){ ctx.lineto(this.left,con2); ctx.lineto(this.pointerx,this.pointery); ctx.lineto(this.left,con1); ctx.lineto(this.left,this.top+this.radius); } else ctx.lineto(this.left,this.top+this.radius); ctx.quadraticcurveto(this.left, this.top, this.left+this.radius, this.top); ctx.stroke(); ctx.restore(); this._renderfill(ctx); this._renderstroke(ctx); } }); here jsfiddle of have now: http://jsfiddle.net/xu2nzjv2/7/
my first thing when add bubble canvas selection area way off in top left - happens when pointer pointing down left or right. know if there way lock position of pointer somehow unless dragged in stackoverflow canvas shape above.
the second thing wondering if there way make point draggable able move entire bubble. part might not hard once have bounding/selection box thing working since figure can make tool if clicked canvas listening repositioning of pointer.
any super super appreciated!
Comments
Post a Comment