优化圆形文本

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"}]}
+{"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"}]}

design1.html

@@ -200,12 +200,12 @@
                                     style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
                                 </div>
                             </div>
-                            <!-- <div class="component-line">
+                            <div class="component-line">
                                 <span class="name" language="m" zh="直径：" ozh="直径：" en="Diameter:"></span>
                                 <div id="circle_text_diameter"
                                     style="display: inline-block;width: 150px;position: relative;top:-3px;left:5px;">
                                 </div>
-                            </div> -->
+                            </div>
                             <div class="component-line">
                                 <span class="name" language="m" zh="颜色：" ozh="顏色：" en="Color:"></span>
                                 <input type="color" id="circle_text_color" class="input_color">
@@ -586,7 +586,7 @@
         </div>
     </div>
     <script src="./public/js/fabric.min.js"></script>
-    <script src="./public/js/guideLines.js"></script>
+    <script src="./public/js/guideLines1.js"></script>
     <script src="./public/js/print.min.js"></script>
     <script src="./public/js/crypto-js.min.js"></script>
     <script src="./public/js/jspdf.umd.min.js"></script>
@@ -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);

design2.html

@@ -565,7 +565,7 @@
         </div>
     </div>
     <script src="./public/js/fabric.min.js"></script>
-    <script src="./public/js/guideLines.js"></script>
+    <script src="./public/js/guideLines2.js"></script>
     <script src="./public/js/print.min.js"></script>
     <script src="./public/js/crypto-js.min.js"></script>
     <script src="./public/js/jspdf.umd.min.js"></script>
@@ -5915,20 +5915,20 @@
             })
             canvas2.on("object:moving", function (e) {
                 let obj = canvas.getActiveObject()
-                if (objs[getIndex(e.target) - 1].type ===11) {
+                // if (objs[getIndex(e.target) - 1].type ===11) {
-                    let pointer = {
+                //     let pointer = {
-                        x: obj.left,
+                //         x: obj.left,
-                        y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
+                //         y: obj.top > canvas.height/2 ? obj.top + obj.height/2 : obj.top - obj.height/2
-                    }
+                //     }
-                    console.log(obj)
+                //     console.log(obj)
-                    let distance =  getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
+                //     let distance =  getDisdance(pointer.x, pointer.y, canvas.width/2,canvas.height/2)
-                    let angleDeg = getDeg(pointer)
+                //     let angleDeg = getDeg(pointer)
-                    let flipped = pointer.y > canvas.height/2 ? true : false
+                //     let flipped = pointer.y > canvas.height/2 ? true : false
-                    obj.set("diameter", distance*2);
+                //     obj.set("diameter", distance*2);
-                    // obj.set("angle", angleDeg);
+                //     // obj.set("angle", angleDeg);
-                    obj.set("flipped", flipped);
+                //     obj.set("flipped", flipped);
-                    // canvas.renderAll();
+                //     // canvas.renderAll();
-                }
+                // }
                 updateControls();
             });
             canvas2.on('object:scaling', function (e) {

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();
+	});
+}
+