diff --git a/data.json b/data.json index e4c7a7e..8e19de7 100644 --- a/data.json +++ b/data.json @@ -1 +1 @@ -{"history":[{"time":"2025-4-10","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-4-10","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi5.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi.soon"}]} \ No newline at end of file +{"history":[{"time":"2025-5-28","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi6.soon"},{"time":"2025-4-10","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi7.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi5.soon"},{"time":"2025-4-9","path":"E:\\project\\sideline\\shanghaikashu\\文件\\soon文件\\ceshi.soon"}]} \ No newline at end of file diff --git a/design1.html b/design1.html index eae0d43..ef3e84b 100644 --- a/design1.html +++ b/design1.html @@ -200,12 +200,12 @@ style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;"> - +
@@ -586,7 +586,7 @@
- + @@ -613,7 +613,7 @@ (function (fabric) { fabric.CurvedText = fabric.util.createClass(fabric.Object, { type: 'curved-text', - diameter: 250, + diameter: 0, kerning: 0, text: '', flipped: false, @@ -4984,7 +4984,7 @@ lockScalingY: true, fontFamily: 'Arial', originX: 'center', - originY: 'center', + // originY: 'center', angle: angleDeg, flipped: pointer.y > canvas.height/2 ? true : false }); @@ -6194,12 +6194,15 @@ if (objs[getIndex(e.target) - 1].type ===11) { let pointer = { x: obj.left, - y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 + y: obj.top } - console.log(obj) + // console.log(obj) let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) let angleDeg = getDeg(pointer) let flipped = pointer.y > canvas.height/2 ? true : false + // distance = distance + 140 + // console.log(pointer.x, pointer.y, canvas.width/2,canvas.height/2, distance*2) + circle_text_diameter.setValue(distance*2-500); obj.set("diameter", distance*2); obj.set("angle", angleDeg); obj.set("flipped", flipped); diff --git a/design2.html b/design2.html index 32d5422..b4a9a51 100644 --- a/design2.html +++ b/design2.html @@ -565,7 +565,7 @@ - + @@ -5915,20 +5915,20 @@ }) canvas2.on("object:moving", function (e) { let obj = canvas.getActiveObject() - if (objs[getIndex(e.target) - 1].type ===11) { - let pointer = { - x: obj.left, - y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 - } - console.log(obj) - let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) - let angleDeg = getDeg(pointer) - let flipped = pointer.y > canvas.height/2 ? true : false - obj.set("diameter", distance*2); - // obj.set("angle", angleDeg); - obj.set("flipped", flipped); - // canvas.renderAll(); - } + // if (objs[getIndex(e.target) - 1].type ===11) { + // let pointer = { + // x: obj.left, + // y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2 + // } + // console.log(obj) + // let distance = getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2) + // let angleDeg = getDeg(pointer) + // let flipped = pointer.y > canvas.height/2 ? true : false + // obj.set("diameter", distance*2); + // // obj.set("angle", angleDeg); + // obj.set("flipped", flipped); + // // canvas.renderAll(); + // } updateControls(); }); canvas2.on('object:scaling', function (e) { diff --git a/public/js/guideLines.js b/public/js/guideLines1.js similarity index 100% rename from public/js/guideLines.js rename to public/js/guideLines1.js diff --git a/public/js/guideLines2.js b/public/js/guideLines2.js new file mode 100644 index 0000000..0a01726 --- /dev/null +++ b/public/js/guideLines2.js @@ -0,0 +1,219 @@ +function initAligningGuidelines(canvas) { + + var ctx = canvas.getSelectionContext(), + //aligningLineOffset = 0, + //aligningLineMargin = 0, + //aligningLineWidth = 1, + //aligningLineColor = 'rgb(0,0,0)', + aligningLineOffset = 4, + aligningLineMargin = 5,//吸引 + aligningLineWidth = 2, + aligningLineColor = '#6637FF', + viewportTransform, + zoom = 1; + + function drawVerticalLine(coords) { + drawLine( + coords.x + 0.5, + coords.y1 > coords.y2 ? coords.y2 : coords.y1, + coords.x + 0.5, + coords.y2 > coords.y1 ? coords.y2 : coords.y1); + } + + function drawHorizontalLine(coords) { + drawLine( + coords.x1 > coords.x2 ? coords.x2 : coords.x1, + coords.y + 0.5, + coords.x2 > coords.x1 ? coords.x2 : coords.x1, + coords.y + 0.5); + } + + function drawLine(x1, y1, x2, y2) { + ctx.save(); + ctx.lineWidth = aligningLineWidth; + ctx.strokeStyle = aligningLineColor; + ctx.beginPath(); + let width = canvas.getWidth(); + let height = canvas.getHeight(); + ctx.moveTo(width / 2 - ( ( width / 2 - (x1) ) * zoom ) , height / 2 - ( ( height / 2 - (y1) ) * zoom ));//哪个点散射出来 + ctx.lineTo(width / 2 - ( ( width / 2 - (x2) ) * zoom ), height / 2 - ( ( height / 2 - (y2) ) * zoom ));//结束到哪个点 + //修复中心放大后的位置偏移 2021-10-24 + ctx.stroke(); + ctx.restore(); + } + + function isInRange(value1, value2) { + value1 = Math.round(value1); + value2 = Math.round(value2); + for (var i = value1 - aligningLineMargin, len = value1 + aligningLineMargin; i <= len; i++) { + if (i === value2) { + return true; + } + } + return false; + } + + var verticalLines = [], + horizontalLines = []; + + canvas.on('mouse:down', function () { + viewportTransform = canvas.viewportTransform; + zoom = canvas.getZoom(); + }); + + canvas.on('object:moving', function(e) { + + var activeObject = e.target, + canvasObjects = canvas.getObjects(), + activeObjectCenter = activeObject.getCenterPoint(), + activeObjectLeft = activeObjectCenter.x, + activeObjectTop = activeObjectCenter.y, + activeObjectBoundingRect = activeObject.getBoundingRect(), + activeObjectHeight = activeObjectBoundingRect.height / viewportTransform[3], + activeObjectWidth = activeObjectBoundingRect.width / viewportTransform[0], + horizontalInTheRange = false, + verticalInTheRange = false, + transform = canvas._currentTransform; + + if (!transform) return; + + // It should be trivial to DRY this up by encapsulating (repeating) creation of x1, x2, y1, and y2 into functions, + // but we're not doing it here for perf. reasons -- as this a function that's invoked on every mouse move + + for (var i = canvasObjects.length; i--; ) { + + if (canvasObjects[i] === activeObject) continue; + + var objectCenter = canvasObjects[i].getCenterPoint(), + objectLeft = objectCenter.x, + objectTop = objectCenter.y, + objectBoundingRect = canvasObjects[i].getBoundingRect(), + objectHeight = objectBoundingRect.height / viewportTransform[3], + objectWidth = objectBoundingRect.width / viewportTransform[0]; + + // snap by the horizontal center line + if (isInRange(objectLeft, activeObjectLeft)) { + verticalInTheRange = true; + verticalLines.push({ + x: objectLeft, + y1: (objectTop < activeObjectTop) + ? (objectTop - objectHeight / 2 - aligningLineOffset) + : (objectTop + objectHeight / 2 + aligningLineOffset), + y2: (activeObjectTop > objectTop) + ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) + : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft, activeObjectTop), 'center', 'center'); + } + + // snap by the left edge + if (isInRange(objectLeft - objectWidth / 2, activeObjectLeft - activeObjectWidth / 2)) { + verticalInTheRange = true; + verticalLines.push({ + x: objectLeft - objectWidth / 2, + y1: (objectTop < activeObjectTop) + ? (objectTop - objectHeight / 2 - aligningLineOffset) + : (objectTop + objectHeight / 2 + aligningLineOffset), + y2: (activeObjectTop > objectTop) + ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) + : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft - objectWidth / 2 + activeObjectWidth / 2, activeObjectTop), 'center', 'center'); + } + + // snap by the right edge + if (isInRange(objectLeft + objectWidth / 2, activeObjectLeft + activeObjectWidth / 2)) { + verticalInTheRange = true; + verticalLines.push({ + x: objectLeft + objectWidth / 2, + y1: (objectTop < activeObjectTop) + ? (objectTop - objectHeight / 2 - aligningLineOffset) + : (objectTop + objectHeight / 2 + aligningLineOffset), + y2: (activeObjectTop > objectTop) + ? (activeObjectTop + activeObjectHeight / 2 + aligningLineOffset) + : (activeObjectTop - activeObjectHeight / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(objectLeft + objectWidth / 2 - activeObjectWidth / 2, activeObjectTop), 'center', 'center'); + } + + // snap by the vertical center line + if (isInRange(objectTop, activeObjectTop)) { + horizontalInTheRange = true; + horizontalLines.push({ + y: objectTop, + x1: (objectLeft < activeObjectLeft) + ? (objectLeft - objectWidth / 2 - aligningLineOffset) + : (objectLeft + objectWidth / 2 + aligningLineOffset), + x2: (activeObjectLeft > objectLeft) + ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) + : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop), 'center', 'center'); + } + + // snap by the top edge + if (isInRange(objectTop - objectHeight / 2, activeObjectTop - activeObjectHeight / 2)) { + horizontalInTheRange = true; + horizontalLines.push({ + y: objectTop - objectHeight / 2, + x1: (objectLeft < activeObjectLeft) + ? (objectLeft - objectWidth / 2 - aligningLineOffset) + : (objectLeft + objectWidth / 2 + aligningLineOffset), + x2: (activeObjectLeft > objectLeft) + ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) + : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop - objectHeight / 2 + activeObjectHeight / 2), 'center', 'center'); + } + + // snap by the bottom edge + if (isInRange(objectTop + objectHeight / 2, activeObjectTop + activeObjectHeight / 2)) { + horizontalInTheRange = true; + horizontalLines.push({ + y: objectTop + objectHeight / 2, + x1: (objectLeft < activeObjectLeft) + ? (objectLeft - objectWidth / 2 - aligningLineOffset) + : (objectLeft + objectWidth / 2 + aligningLineOffset), + x2: (activeObjectLeft > objectLeft) + ? (activeObjectLeft + activeObjectWidth / 2 + aligningLineOffset) + : (activeObjectLeft - activeObjectWidth / 2 - aligningLineOffset) + }); + activeObject.setPositionByOrigin(new fabric.Point(activeObjectLeft, objectTop + objectHeight / 2 - activeObjectHeight / 2), 'center', 'center'); + } + } + + if (!horizontalInTheRange) { + horizontalLines.length = 0; + } + + if (!verticalInTheRange) { + verticalLines.length = 0; + } + }); + + canvas.on('before:render', function() { + + if(canvas&&canvas.contextTop) + { + canvas.clearContext(canvas.contextTop); + } + + + }); + + canvas.on('after:render', function() { + for (var i = verticalLines.length; i--; ) { + drawVerticalLine(verticalLines[i]); + } + for (var i = horizontalLines.length; i--; ) { + drawHorizontalLine(horizontalLines[i]); + } + verticalLines.length = horizontalLines.length = 0; + }); + + canvas.on('mouse:up', function() { + verticalLines.length = horizontalLines.length = 0; + canvas.renderAll(); + }); +} +