123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305 |
- (function () {
-
- var mouseFrom = {},
- mouseTo = {},
- drawType = 'right',
- canvasObjectIndex = 0,
- textbox = null;
- var drawWidth = 2;
- var color = "#E34F51";
- var drawingObject = null;
- var moveCount = 1;
- var doDrawing = false;
- var rightColor = "#006400", wrongColor = "#E34F51";
-
- var canvas = new fabric.Canvas("c", {
- isDrawingMode: false,
- skipTargetFind: true,
- selectable: false,
- selection: false
- });
- fabric.Image.fromURL('http://icdn.apigo.cn/paper.png?1', function (img) {
- canvas.add(img);
- }, { crossOrigin: 'anonymous' });
- window.canvas = canvas;
- window.zoom = window.zoom ? window.zoom : 1;
- window.drawType = drawType;
- canvas.freeDrawingBrush.color = color;
- canvas.freeDrawingBrush.width = drawWidth;
-
- 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;
- });
- 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") {
- continue;
- }
- canvas.remove(e.target._objects[etindex]);
- }
- } else {
-
- if (e.target.type != "image") {
- canvas.remove(e.target);
- }
- }
- canvas.discardActiveObject();
- });
-
- function transformMouse(mouseX, mouseY) {
- return { x: mouseX / window.zoom, y: mouseY / window.zoom };
- }
-
- jQuery("#toolsul")
- .find("li")
- .on("click", function () {
-
- jQuery("#toolsul")
- .find("li>i")
- .each(function () {
- jQuery(this).attr("class", jQuery(this).attr("data-default"));
- });
- jQuery(this)
- .addClass("active")
- .siblings()
- .removeClass("active");
- jQuery(this)
- .find("i")
- .attr(
- "class",
- jQuery(this)
- .find("i")
- .attr("class")
- .replace("black", "select")
- );
- drawType = jQuery(this).attr("data-type");
- window.drawType = drawType;
- canvas.isDrawingMode = false;
- if (textbox) {
-
- textbox.exitEditing();
- textbox = null;
- }
- if (drawType == "pen") {
- canvas.isDrawingMode = true;
- } else if (drawType == "remove") {
- canvas.selection = true;
- canvas.skipTargetFind = false;
- canvas.selectable = true;
- } else {
- canvas.skipTargetFind = true;
- canvas.selection = false;
- }
- });
-
- function drawing() {
- if (drawingObject) {
- canvas.remove(drawingObject);
- }
- var canvasObject = null;
- switch (drawType) {
- case "arrow":
- canvasObject = new fabric.Path(drawArrow(mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y, 30, 30), {
- stroke: color,
- fill: "rgba(255,255,255,0)",
- strokeWidth: drawWidth
- });
- break;
- case "line":
- canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
- stroke: color,
- strokeWidth: drawWidth
- });
- break;
- case "dottedline":
- canvasObject = new fabric.Line([mouseFrom.x, mouseFrom.y, mouseTo.x, mouseTo.y], {
- strokeDashArray: [3, 1],
- stroke: color,
- strokeWidth: drawWidth
- });
- break;
- case "text":
- textbox = new fabric.Textbox("", {
- left: mouseFrom.x - 60,
- top: mouseFrom.y - 20,
- width: 150,
- fontSize: 18,
- borderColor: "#2c2c2c",
- fill: color,
- hasControls: false
- });
- canvas.add(textbox);
- textbox.enterEditing();
- textbox.hiddenTextarea.focus();
- break;
- case 'right':
- var step = 30;
- var path =
- "M " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- mouseFrom.x +
- " " +
- mouseFrom.y +
- " L " +
- (mouseFrom.x + step * 2) +
- " " +
- (mouseFrom.y - step * 2);
- canvasObject = new fabric.Path(path, {
- stroke: rightColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case 'wrong':
- var step = 30;
- var path =
- "M " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- (mouseFrom.x + step) +
- " " +
- (mouseFrom.y + step) +
- "M " +
- (mouseFrom.x + step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y + step);
- canvasObject = new fabric.Path(path, {
- stroke: wrongColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case 'smallright':
- var step = 10;
- var path =
- "M " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- mouseFrom.x +
- " " +
- mouseFrom.y +
- " L " +
- (mouseFrom.x + step * 2) +
- " " +
- (mouseFrom.y - step * 2);
- canvasObject = new fabric.Path(path, {
- stroke: rightColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case 'smallwrong':
- var step = 10;
- var path =
- "M " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- (mouseFrom.x + step) +
- " " +
- (mouseFrom.y + step) +
- "M " +
- (mouseFrom.x + step) +
- " " +
- (mouseFrom.y - step) +
- " L " +
- (mouseFrom.x - step) +
- " " +
- (mouseFrom.y + step);
- canvasObject = new fabric.Path(path, {
- stroke: wrongColor,
- strokeWidth: drawWidth,
- fill: "rgba(255, 255, 255, 0)"
- });
- break;
- case "remove":
- break;
- default:
- break;
- }
- if (canvasObject) {
-
- canvasObject.type = drawType;
- canvas.add(canvasObject);
- drawingObject = canvasObject;
- }
- }
-
- function drawArrow(fromX, fromY, toX, toY, theta, headlen) {
- theta = typeof theta != "undefined" ? theta : 30;
- headlen = typeof theta != "undefined" ? headlen : 10;
-
- var angle = Math.atan2(fromY - toY, fromX - toX) * 180 / Math.PI,
- angle1 = (angle + theta) * Math.PI / 180,
- angle2 = (angle - theta) * Math.PI / 180,
- topX = headlen * Math.cos(angle1),
- topY = headlen * Math.sin(angle1),
- botX = headlen * Math.cos(angle2),
- botY = headlen * Math.sin(angle2);
- var arrowX = fromX - topX,
- arrowY = fromY - topY;
- var path = " M " + fromX + " " + fromY;
- path += " L " + toX + " " + toY;
- arrowX = toX + topX;
- arrowY = toY + topY;
- path += " M " + arrowX + " " + arrowY;
- path += " L " + toX + " " + toY;
- arrowX = toX + botX;
- arrowY = toY + botY;
- path += " L " + arrowX + " " + arrowY;
- return path;
- }
-
- function getCanvasObjectIndex() {
- return canvasObjectIndex++;
- }
- })();
|