/** * Definition of shape Oval */ ovm.shape.oval = function(xPixelSpacing,yPixelSpacing,measure_Unit) { var handle = 5; var ovals = []; var curr_oval = null; var xPxlSpcing = xPixelSpacing; var yPxlSpcing = yPixelSpacing; var measureUnit = measure_Unit; this.isCurrentDrawingOval = false; this.createNewOval = function(x1,y1,x2,y2) { if(curr_oval!=undefined) { curr_oval.setCoords(x1,y1,x2,y2,false); // if(parseFloat(curr_oval.area)>0.0) { // To avoid oval in negative area curr_oval.meanOfOval(); curr_oval.stdDevOfOval(); ovals.push(curr_oval); curr_oval = undefined; // } } }; this.initNewOval = function() { curr_oval = new ovm.oval(xPxlSpcing, yPxlSpcing,measureUnit, 0, 0, 0, 0, 0); }; this.draw = function(graphic,canvasCtx) { // Draw Shape canvasCtx.lineWidth='2'; canvasCtx.strokeStyle=canvasCtx.fillStyle='orange'; canvasCtx.save(); var radX = graphic.endX-graphic.centerX; var radY = graphic.endY-graphic.centerY; canvasCtx.beginPath(); canvasCtx.translate(graphic.centerX-radX,graphic.centerY-radY); //canvasCtx.translate(graphic.centerX,graphic.centerY); canvasCtx.scale(radX,radY); canvasCtx.arc(1,1,1,0,2*Math.PI,false); canvasCtx.restore(); canvasCtx.stroke(); // Handles if(graphic.active) { canvasCtx.strokeStyle = canvasCtx.fillStyle = 'white'; canvasCtx.strokeRect(graphic.centerX-radX,graphic.centerY-radY-handle,handle*2, handle*2); canvasCtx.strokeRect(graphic.centerX,graphic.centerY-radY-handle,handle*2, handle*2); canvasCtx.strokeRect(graphic.centerX+radX,graphic.centerY-radY-handle,handle*2,handle*2); canvasCtx.strokeRect(graphic.centerX-radX-handle,graphic.centerY,handle*2,handle*2); canvasCtx.strokeRect(graphic.centerX+radX-handle,graphic.centerY,handle*2,handle*2); canvasCtx.strokeRect(graphic.centerX-radX-handle,graphic.centerY+radY,handle*2,handle*2); canvasCtx.strokeRect(graphic.centerX,graphic.centerY+radY-handle,handle*2,handle*2); canvasCtx.strokeRect(graphic.centerX+radX-handle,graphic.centerY+radY,handle*2,handle*2); } // Text canvasCtx.fillStyle = graphic.txtActive? "blue" : "maroon"; canvasCtx.globalAlpha = 0.5; canvasCtx.font = "14px Arial"; var text = canvasCtx.measureText(graphic.stdDev.length>graphic.area.length? graphic.stdDev : graphic.area); canvasCtx.fillRect(graphic.textX,graphic.textY,Math.ceil(text.width)+20,60); canvasCtx.globalAlpha = 0.9; canvasCtx.fillStyle = "white"; //canvasCtx.fillText(graphic.area,graphic.textX+2,graphic.textY+15); //canvasCtx.fillText(graphic.mean,graphic.textX+2,graphic.textY+35); //canvasCtx.fillText(graphic.stdDev,graphic.textX+2,graphic.textY+55); if(state.hflip && !state.vflip && !state.rotate!=0 && !this.isCurrentDrawingOval){ canvasCtx.save(); canvasCtx.translate(drawCanvas.width,0); canvasCtx.scale(-1,1); canvasCtx.fillText(graphic.area,(drawCanvas.width -graphic.textX+2)-135,graphic.textY+15); canvasCtx.fillText(graphic.mean,(drawCanvas.width -graphic.textX+2)-135,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,(drawCanvas.width -graphic.textX+2)-135,graphic.textY+55); canvasCtx.restore(); } if(state.vflip && !state.hflip && !state.rotate!=0 && !this.isCurrentDrawingOval){ canvasCtx.save(); canvasCtx.translate(0,drawCanvas.height); canvasCtx.scale(1,-1); canvasCtx.fillText(graphic.area, graphic.textX+2,(drawCanvas.height -graphic.textY)-48); canvasCtx.fillText(graphic.mean, graphic.textX+2,(drawCanvas.height -graphic.textY)-28); canvasCtx.fillText(graphic.stdDev, graphic.textX+2,(drawCanvas.height -graphic.textY)-8); canvasCtx.restore(); } if(!state.vflip && state.hflip && (state.rotate===90 || state.rotate===180 || state.rotate===270) && !this.isCurrentDrawingOval){ if(state.rotate===90 || state.rotate===180 || state.rotate===270) { canvasCtx.save(); canvasCtx.translate(0,drawCanvas.height); canvasCtx.scale(1,-1); canvasCtx.fillText(graphic.area,graphic.textX+2,(drawCanvas.height -graphic.textY)-50); canvasCtx.fillText(graphic.mean,graphic.textX+2,(drawCanvas.height -graphic.textY)-30); canvasCtx.fillText(graphic.stdDev,graphic.textX+2,(drawCanvas.height -graphic.textY)-10); canvasCtx.restore(); } } if(state.vflip && !state.hflip && (state.rotate===90 || state.rotate===180 || state.rotate===270) && !this.isCurrentDrawingOval){ if(state.rotate===90 || state.rotate===180 || state.rotate===270) { canvasCtx.save(); canvasCtx.translate(drawCanvas.width,0); canvasCtx.scale(-1,1); canvasCtx.fillText(graphic.area,(drawCanvas.width -graphic.textX+2)-130,graphic.textY+15); canvasCtx.fillText(graphic.mean,(drawCanvas.width -graphic.textX+2)-130,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,(drawCanvas.width -graphic.textX+2)-130,graphic.textY+55); canvasCtx.restore(); } } if(state.rotate!=0 && !state.vflip && !state.hflip && !this.isCurrentDrawingOval) { if(state.rotate===180) { canvasCtx.save(); canvasCtx.translate(drawCanvas.width/2,drawCanvas.height/2); canvasCtx.rotate(Math.PI); canvasCtx.translate(-drawCanvas.width/2,-drawCanvas.height/2); canvasCtx.fillText(graphic.area,(drawCanvas.width -graphic.textX)-130, (drawCanvas.height -graphic.textY)-50); //, canvasCtx.fillText(graphic.mean, (drawCanvas.width -graphic.textX)-130, (drawCanvas.height -graphic.textY)-30); // canvasCtx.fillText(graphic.stdDev, (drawCanvas.width -graphic.textX)-130, (drawCanvas.height -graphic.textY)-10);// canvasCtx.restore(); } else { canvasCtx.fillText(graphic.area,graphic.textX+2,graphic.textY+15); canvasCtx.fillText(graphic.mean,graphic.textX+2,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,graphic.textX+2,graphic.textY+55); } } if((state.rotate===0 || state.rotate===90 || state.rotate===180 || state.rotate===270) && state.vflip && state.hflip && !this.isCurrentDrawingOval) { if(state.rotate===0) { canvasCtx.save(); canvasCtx.translate(drawCanvas.width,drawCanvas.height); canvasCtx.scale(-1,-1); canvasCtx.fillText(graphic.area,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-50); canvasCtx.fillText(graphic.mean,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-30); canvasCtx.fillText(graphic.stdDev,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-10); canvasCtx.restore(); } else { canvasCtx.fillText(graphic.area,graphic.textX+2,graphic.textY+15); canvasCtx.fillText(graphic.mean,graphic.textX+2,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,graphic.textX+2,graphic.textY+55); } } if((!state.rotate===0 || !state.rotate===90 || !state.rotate===180 || !state.rotate===270) && state.hflip && state.vflip && !this.isCurrentDrawingOval) { canvasCtx.save(); canvasCtx.translate(drawCanvas.width,drawCanvas.height); canvasCtx.scale(-1,-1); canvasCtx.fillText(graphic.area,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-50); canvasCtx.fillText(graphic.mean,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-30); canvasCtx.fillText(graphic.stdDev,(drawCanvas.width -graphic.textX+2)-135,(drawCanvas.height -graphic.textY)-10); canvasCtx.restore(); } if(!state.hflip && !state.vflip && !state.rotate!=0) { //canvasCtx.save(); canvasCtx.fillText(graphic.area,graphic.textX+2,graphic.textY+15); canvasCtx.fillText(graphic.mean,graphic.textX+2,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,graphic.textX+2,graphic.textY+55); //canvasCtx.restore(); } if(this.isCurrentDrawingOval) { canvasCtx.fillText(graphic.area,graphic.textX+2,graphic.textY+15); canvasCtx.fillText(graphic.mean,graphic.textX+2,graphic.textY+35); canvasCtx.fillText(graphic.stdDev,graphic.textX+2,graphic.textY+55); } // Reference Lines if(graphic.centerX!=graphic.textX) { canvasCtx.save(); canvasCtx.beginPath(); canvasCtx.strokeStyle = "yellow"; canvasCtx.setLineDash([10,7]); var closestPt = this.getClosestAnchor([{x:graphic.textX,y:graphic.textY},{x:graphic.textX+Math.ceil(text.width+10),y:graphic.textY},{x:graphic.textX,y:graphic.textY+60},{x:graphic.textX+Math.ceil(text.width+10),y:graphic.textY+60}],{x:graphic.refX,y:graphic.refY}); canvasCtx.moveTo(closestPt.x,closestPt.y); canvasCtx.lineTo(graphic.refX,graphic.refY); canvasCtx.stroke(); canvasCtx.closePath(); canvasCtx.restore(); } }; this.drawData = function(ctx) { ctx.save(); for(var i=0;i=(this.centerX-radX-handle) && point.x<=(this.centerX-radX+handle) && point.y>=(this.centerY-radY-handle) && point.y<=(this.centerY-radY+handle)) { target.style.cursor = 'nw-resize'; return 0; } else if(point.x>=(this.centerX-handle) && point.x<=(this.centerX+handle) && point.y>=(this.centerY-radY-handle) && point.y<=(this.centerY-radY+handle)) { target.style.cursor = 'n-resize'; return 1; } else if(point.x>=(this.centerX+radX-handle) && point.x<=(this.centerX+this.radX+handle) && point.y>=(this.centerY-radY-handle) && point.y<=(this.centerY-radY+handle)) { target.style.cursor = 'ne-resize'; return 2; } else if(point.x>=(this.centerX-radX-handle) && point.x<=(this.centerX-radX+handle) && point.y>=(this.centerY-handle) && point.y<=(this.centerY+handle)) { target.style.cursor = 'w-resize'; return 3; } else if(point.x>=(this.centerX+radX-handle) && point.x<=(this.centerX+radX+handle) && point.y>=(this.centerY-handle) && point.y<=(this.centerY+handle)) { target.style.cursor = 'e-resize'; return 4; } else if(point.x>=(this.centerX-radX-handle) && point.x<=(this.centerX-radX+handle) && point.y>=(this.centerY+radY-handle) && point.y<=(this.centerY+radY+handle)) { target.style.cursor = 'sw-resize'; return 5; } else if(point.x>=(this.centerX-handle) && point.x<=(this.centerX+handle) && point.y>=(this.centerY+radY-handle) && point.y<=(this.centerY+radY+handle)) { target.style.cursor = 's-resize'; return 6; } else if(point.x>=(this.centerX+radX-handle) && point.x<=(this.centerX+radX+handle) && point.y>=(this.centerY+radY-handle) && point.y<=(this.centerY+radY+handle)) { target.style.cursor = 'se-resize'; return 7; } else { target.style.cursor = 'default'; return -1; } }; this.moveShape = function(deltaX,deltaY) { if(this.active) { this.centerX+=deltaX; this.centerY+=deltaY; this.endX+=deltaX; this.endY+=deltaY; this.radiusX = Math.round((this.endX-this.centerX)*this.xPxlSpcing); this.radiusY = Math.round((this.endY-this.centerY)*this.yPxlSpcing); this.txtMean = "Mean : "; this.txtStdDev = "StdDev : "; } this.textX+=deltaX; this.textY+=deltaY; this.findClosestPointOnOval(); }; this.resizeShape = function(deltaX,deltaY,handle) { switch(handle) { case 0: this.centerX+=deltaX; this.centerY+=deltaY; break; case 1: this.centerY+=deltaY; break; case 2: this.endX+=deltaX; this.centerY+=deltaY; break; case 3: this.centerX+=deltaX; break; case 4: this.endX+=deltaX*2; this.centerX+=deltaX; break; case 5: this.centerX+=deltaX; this.endY+=deltaY; break; case 6: this.endY+=deltaY*2; this.centerY+=deltaY; break; case 7: this.endX+=deltaX; this.endY+=deltaY; break; } this.radiusX = Math.round((this.endX-this.centerX)*this.xPxlSpcing); this.radiusY = Math.round((this.endY-this.centerY)*this.yPxlSpcing); this.area = ((Math.PI * this.radiusX*this.radiusY)/100).toFixed(3); this.txtArea = "Area : " + this.area + " " + this.measureUnit; this.txtMean = "Mean : "; this.txtStdDev = "StdDev : "; this.findClosestPointOnOval(); }; this.meanOfOval = function() { var tempX,tempY,tempX2,tempY2,xAxisDifference = false,yAxisDifference =false,xyAxisDifference = false; if (this.centerX>this.endX && this.centerY < this.endY) { tempX = this.centerX; this.centerX = this.endX; this.endX = tempX; xAxisDifference = true; } if(this.centerX < this.endX && this.centerY > this.endY) { tempY = this.centerY; this.centerY = this.endY; this.endY = tempY; yAxisDifference = true; } if(this.centerX>this.endX && this.centerY > this.endY){ tempX2 = this.centerX; tempY2 = this.centerY; this.centerX = this.endX; this.centerY = this.endY; this.endX = tempX2; this.endY = tempY2; xyAxisDifference = true; } var sum = 0, pixelCount = 0; for(var i = this.centerX;ithis.endX && this.centerY < this.endY) { tempX = this.centerX; this.centerX = this.endX; this.endX = tempX; xAxisDifference = true; } if(this.centerX < this.endX && this.centerY > this.endY) { tempY = this.centerY; this.centerY = this.endY; this.endY = tempY; yAxisDifference = true; } if(this.centerX>this.endX && this.centerY > this.endY){ tempX2 = this.centerX; tempY2 = this.centerY; this.centerX = this.endX; this.centerY = this.endY; this.endX = tempX2; this.endY = tempY2; xyAxisDifference = true; } var sum = 0,pixelCount = 0; for(var i = this.centerX;ithis.txtArea.length? this.txtStdDev : this.txtArea); this.txtActive = (point.x>=this.textX && point.x<=this.textX+(Math.ceil((text.width+state.translationX)/state.scale)) && point.y>=this.textY && point.y<=(this.textY+(60/state.scale))); return this.txtActive; }; this.findClosestPointOnOval = function(ex,ey,ea,eb,x,y) { var angle = Math.atan2(this.centerY-this.textY,this.centerX-this.textX) * 180 / Math.PI; this.refX = this.centerX - (this.endX-this.centerX) * Math.cos(angle*Math.PI/180); this.refY = this.centerY - (this.endY-this.centerY) * Math.sin(angle*Math.PI/180); }; };