123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- var mouseFrom = {},
- mouseTo = {},
- drawType = 'right',
- canvasObjectIndex = 0;
- var drawWidth = 2;
- var modifySize = 20, modifySmallSize = 10;
- var color = "#E34F51";
- var drawingObject = null;
- var moveCount = 1;
- var doDrawing = false;
- var rightColor = "#008B00", wrongColor = "#E34F51";
- var appErrCount = 0;
- var errTextBoxArray = new Array();
- var canvasArr = [];
- function switchCanvas(url, index) {
- var canvasId = "c" + index;
- jQuery("#canvasDiv").find("div").addClass("fn-hide");
- jQuery("#canvasDiv").find("div").eq(index).removeClass("fn-hide");
- if (canvasArr[index]) {
-
- window.canvas = canvasArr[index];
- return false;
- }
- var canvas = new fabric.Canvas(canvasId, {
- isDrawingMode: false,
- skipTargetFind: true,
- selectable: false,
- selection: false
- });
- fabric.Image.fromURL(url, function (img) {
- canvas.add(img);
- }, { crossOrigin: 'anonymous' });
- canvasArr[index] = canvas;
- canvas.freeDrawingBrush.color = color;
- canvas.freeDrawingBrush.width = drawWidth;
- window.canvas = canvas;
-
- canvas.on("mouse:down", function (options) {
- var xy = transformMouse(options.e.offsetX, options.e.offsetY);
- mouseFrom.x = xy.x;
- mouseFrom.y = xy.y;
- doDrawing = true;
- });
- canvas.on("mouse:up", function (options) {
- var xy = transformMouse(options.e.offsetX, options.e.offsetY);
- mouseTo.x = xy.x;
- mouseTo.y = xy.y;
- drawing();
- drawingObject = null;
- moveCount = 1;
- doDrawing = false;
- if (drawType.indexOf("wrong") != -1) {
-
- jQuery("#errModal").removeClass("fn-hide");
- jQuery("#errModal").find("div[name=etag]").removeClass("active");
- ++appErrCount;
- var addLeft = 10, addTop = 25;
- if (drawType == "wrong") {
- addLeft = 25;
- addTop = 30;
- }
- var textbox = new fabric.Textbox(appErrCount.toString(), {
- left: mouseFrom.x + addLeft,
- top: mouseFrom.y - addTop,
- fontSize: 18,
- borderColor: "#2c2c2c",
- fill: color,
- hasControls: false,
- eindex: (appErrCount - 1),
- type: "textbox"
- });
- canvas.add(textbox);
- errTextBoxArray[appErrCount] = textbox;
- }
- });
- canvas.on("mouse:move", function (options) {
- if (moveCount % 2 && !doDrawing) {
-
- return;
- }
- moveCount++;
- var xy = transformMouse(options.e.offsetX, options.e.offsetY);
- mouseTo.x = xy.x;
- mouseTo.y = xy.y;
- drawing();
- });
- canvas.on("selection:created", function (e) {
- if (e.target._objects) {
-
- var etCount = e.target._objects.length;
- for (var etindex = 0; etindex < etCount; etindex++) {
- if (e.target._objects[etindex].type == "image" || e.target._objects[etindex].type == "textbox") {
- continue;
- }
- var eindex = e.target._objects[etindex].eindex;
- canvas.remove(errTextBoxArray[(1 + eindex)]);
- delete errTextBoxArray[(1 + eindex)];
- canvas.remove(e.target._objects[etindex]);
-
- var errMsgChildren = jQuery("#errMsg").children();
- errMsgChildren.eq(errMsgChildren.length - 1 - eindex).addClass("fn-hide");
- }
- } else {
-
- if (e.target.type != "image" && e.target.type != "textbox") {
- var eindex = e.target.eindex;
- canvas.remove(errTextBoxArray[(1 + eindex)]);
- delete errTextBoxArray[(1 + eindex)];
- canvas.remove(e.target);
-
- var errMsgChildren = jQuery("#errMsg").children();
- errMsgChildren.eq(errMsgChildren.length - 1 - eindex).addClass("fn-hide");
- }
- }
- canvas.discardActiveObject();
- });
- }
- window.zoom = window.zoom ? window.zoom : 1;
- function transformMouse(mouseX, mouseY) {
- return { x: mouseX / window.zoom, y: mouseY / window.zoom };
- }
- function drawing() {
- if (drawingObject) {
- canvas.remove(drawingObject);
- }
- var canvasObject = null;
- switch (drawType) {
- case 'right':
- var path =
- "M " +
- (mouseFrom.x - modifySize) +
- " " +
- (mouseFrom.y - modifySize) +
- " L " +
- mouseFrom.x +
- " " +
- mouseFrom.y +
- " L " +
- (mouseFrom.x + modifySize * 2) +
- " " +
- (mouseFrom.y - modifySize * 2);
- canvasObject = new fabric.Path(path, {
- stroke: rightColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case 'wrong':
- var path =
- "M " +
- (mouseFrom.x - modifySize) +
- " " +
- (mouseFrom.y - modifySize) +
- " L " +
- (mouseFrom.x + modifySize) +
- " " +
- (mouseFrom.y + modifySize) +
- "M " +
- (mouseFrom.x + modifySize) +
- " " +
- (mouseFrom.y - modifySize) +
- " L " +
- (mouseFrom.x - modifySize) +
- " " +
- (mouseFrom.y + modifySize);
- canvasObject = new fabric.Path(path, {
- stroke: wrongColor,
- strokeWidth: drawWidth,
- eindex: appErrCount,
- fill: "rgba(255, 255, 255, 0)"
- });
-
- break;
- case 'smallright':
- var path =
- "M " +
- (mouseFrom.x - modifySmallSize) +
- " " +
- (mouseFrom.y - modifySmallSize) +
- " L " +
- mouseFrom.x +
- " " +
- mouseFrom.y +
- " L " +
- (mouseFrom.x + modifySmallSize * 2) +
- " " +
- (mouseFrom.y - modifySmallSize * 2);
- canvasObject = new fabric.Path(path, {
- stroke: rightColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case 'smallwrong':
- var path =
- "M " +
- (mouseFrom.x - modifySmallSize) +
- " " +
- (mouseFrom.y - modifySmallSize) +
- " L " +
- (mouseFrom.x + modifySmallSize) +
- " " +
- (mouseFrom.y + modifySmallSize) +
- "M " +
- (mouseFrom.x + modifySmallSize) +
- " " +
- (mouseFrom.y - modifySmallSize) +
- " L " +
- (mouseFrom.x - modifySmallSize) +
- " " +
- (mouseFrom.y + modifySmallSize);
- canvasObject = new fabric.Path(path, {
- stroke: wrongColor,
- strokeWidth: drawWidth,
- eindex: appErrCount,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case "rectangle":
- canvasObject = new fabric.Rect({
- top: mouseFrom.y,
- left: mouseFrom.x,
- width: (mouseTo.x - mouseFrom.x),
- height: (mouseTo.y - mouseFrom.y),
- stroke: color,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case "remove":
- break;
- case "help":
- break;
- default:
- break;
- }
- if (canvasObject) {
-
- canvasObject.type = drawType;
- canvas.add(canvasObject);
- drawingObject = canvasObject;
- }
- }
- function getCanvasObjectIndex() {
- return canvasObjectIndex++;
- }
|