如何在旋转和调整大小后设置矩形的中心点，保持旧位置

Question

我在旋转和调整大小后尝试设置中心点，但出了点问题。

$id_a = $request->get('id_a');
$id_b = $request->get('id_b');

if(Master::where('id_a','=', $id_a)->where('id_b','=',$id_b)->exists()) {
do something
}

var width = window.innerWidth;
    var height = window.innerHeight;
	
	$('#left').on('click', function(){
	
		rectGroup.rotate(-1);
		layer.draw();
	
	});
	
	$('#right').on('click', function(){
	
		rectGroup.rotate(1);
		layer.draw();
	
	});
	
    function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('Image')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
            case 'topLeft':
                topRight.setY(anchorY);
                bottomLeft.setX(anchorX);
                break;
            case 'topRight':
                topLeft.setY(anchorY);
                bottomRight.setX(anchorX);
                break;
            case 'bottomRight':
                bottomLeft.setY(anchorY);
                topRight.setX(anchorX);
                break;
            case 'bottomLeft':
                bottomRight.setY(anchorY);
                topLeft.setX(anchorX);
                break;
        }

        image.position(topLeft.position());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if(width && height) {
            image.width(width);
            image.height(height);
        }
    }
    function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true,
            dragOnTop: false
        });

        anchor.on('dragmove', function() {
            update(this);
            layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
            group.setDraggable(false);
            this.moveToTop();
        });
		anchor.on('dragstart', function() {
			img.oldSize = {w: img.getWidth(), h: img.getHeight()};
        });
        anchor.on('dragend', function() {
            group.setDraggable(true);
						setRectZoomPoint();
            layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function() {
            var layer = this.getLayer();
            document.body.style.cursor = 'pointer';
            this.setStrokeWidth(4);
            layer.draw();
        });
        anchor.on('mouseout', function() {
            var layer = this.getLayer();
            document.body.style.cursor = 'default';
            this.setStrokeWidth(2);
            layer.draw();
        });

        group.add(anchor);
    }
	
	function setRectZoomPoint(){
	
		var dif = {x: img.x(), y: img.y()};
		rectGroup.move({x: dif.x, y: dif.y});
		rectGroup.getChildren().each(function(child){child.move({x: -dif.x, y: -dif.y})});
		
		//set center point
		rectGroup.move({x: -img.oldSize.w / 2, y: -img.oldSize.h / 2});
		rectGroup.move({x: img.getWidth() / 2, y: img.getHeight() / 2});
		rectGroup.offset({x: img.getWidth() / 2, y: img.getHeight() / 2});
		rectGroup.get('.centerPoint')[0].position({x: img.getWidth() / 2, y: img.getHeight() / 2});
		layer.draw();
	
	}
	var angle = 0;
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();
    stage.add(layer);

    var img = new Konva.Image({
        width: 200,
        height: 137
    });
	img.oldSize = {w: 200, h: 137};


    var rectGroup = new Konva.Group({
        x: 180,
        y: 50,
        draggable: true
    });
    layer.add(rectGroup);
    rectGroup.add(img);
    addAnchor(rectGroup, 0, 0, 'topLeft');
    addAnchor(rectGroup, 200, 0, 'topRight');
    addAnchor(rectGroup, 200, 138, 'bottomRight');
    addAnchor(rectGroup, 0, 138, 'bottomLeft');
	addAnchor(rectGroup, 100, 69, 'centerPoint');

    var imageObj1 = new Image();
    imageObj1.onload = function() {
        img.image(imageObj1);
		setRectZoomPoint();
        layer.draw();
    };
    imageObj1.src = 'https://t4.ftcdn.net/jpg/00/78/73/53/240_F_78735333_o3qJe4bT5ciwldLIjVDulFKrDAV3jGYO.jpg';

Answer 1

＆＃13;

＆＃13;

var width = window.innerWidth;
    var height = window.innerHeight;
	
	$('#left').on('click', function(){
	
		rectGroup.rotate(-1);
		layer.draw();
	
	});
	
	$('#right').on('click', function(){
	
		rectGroup.rotate(1);
		layer.draw();
	
	});
	
    function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.get('.topLeft')[0];
        var topRight = group.get('.topRight')[0];
        var bottomRight = group.get('.bottomRight')[0];
        var bottomLeft = group.get('.bottomLeft')[0];
        var image = group.get('Image')[0];

        var anchorX = activeAnchor.getX();
        var anchorY = activeAnchor.getY();

        // update anchor positions
        switch (activeAnchor.getName()) {
            case 'topLeft':
                topRight.setY(anchorY);
                bottomLeft.setX(anchorX);
                break;
            case 'topRight':
                topLeft.setY(anchorY);
                bottomRight.setX(anchorX);
                break;
            case 'bottomRight':
                bottomLeft.setY(anchorY);
                topRight.setX(anchorX);
                break;
            case 'bottomLeft':
                bottomRight.setY(anchorY);
                topLeft.setX(anchorX);
                break;
        }

        image.position(topLeft.position());

        var width = topRight.getX() - topLeft.getX();
        var height = bottomLeft.getY() - topLeft.getY();
        if(width && height) {
            image.width(width);
            image.height(height);
        }
    }
    function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Konva.Circle({
            x: x,
            y: y,
            stroke: '#666',
            fill: '#ddd',
            strokeWidth: 2,
            radius: 8,
            name: name,
            draggable: true,
            dragOnTop: false
        });

        anchor.on('dragmove', function() {
            update(this);
            layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
            group.setDraggable(false);
            this.moveToTop();
        });
		anchor.on('dragstart', function() {
			img.oldSize = {w: img.getWidth(), h: img.getHeight()};
        });
        anchor.on('dragend', function() {
            group.setDraggable(true);
			setRectZoomPoint();
            layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function() {
            var layer = this.getLayer();
            document.body.style.cursor = 'pointer';
            this.setStrokeWidth(4);
            layer.draw();
        });
        anchor.on('mouseout', function() {
            var layer = this.getLayer();
            document.body.style.cursor = 'default';
            this.setStrokeWidth(2);
            layer.draw();
        });

        group.add(anchor);
    }
	
	function setRectZoomPoint(){
		
		// setting position of rectangle and anchors to 0,0
		var dif = {x: img.x(), y: img.y()};
		rectGroup.getChildren().each(function(child){child.move({x: -dif.x, y: -dif.y})});
		
		var radian = toRadians(-rectGroup.rotation());
		var absPos = {x: rectGroup.x(), y: rectGroup.y()};
		//old CenterPoint thats before resize
		var oldCP = {
			x: absPos.x - absPos.x * Math.cos(radian) - absPos.y * Math.sin(radian), 
			y: absPos.y - absPos.y * Math.cos(radian) + absPos.x * Math.sin(radian)
		};
		//new CenterPoint thats after resize without angle
		var newCP = {
			x: rectGroup.x() + img.getWidth() / 2 - img.oldSize.w / 2 + dif.x, 
			y: rectGroup.y() + img.getHeight()/ 2 - img.oldSize.h / 2+ dif.y};
		//must calculate real central point with angle
		var realCP = {
			x: oldCP.x + (newCP.x * Math.cos(radian) + newCP.y * Math.sin(radian)),
			y: oldCP.y + (newCP.x * -Math.sin(radian) + newCP.y * Math.cos(radian))
		}
		
		rectGroup.position({x: realCP.x, y: realCP.y});
		rectGroup.offset({x: img.getWidth() / 2, y: img.getHeight() / 2});
		rectGroup.get('.centerPoint')[0].position({x: img.getWidth() / 2, y: img.getHeight() / 2});
		layer.draw();
	
	}
    var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
    });

    var layer = new Konva.Layer();
    stage.add(layer);

    var img = new Konva.Image({
        width: 200,
        height: 137
    });
	img.oldSize = {w: 200, h: 137};


    var rectGroup = new Konva.Group({
        x: 300,
        y: 200,
        draggable: true
    });
    layer.add(rectGroup);
    rectGroup.add(img);
    addAnchor(rectGroup, 0, 0, 'topLeft');
    addAnchor(rectGroup, 200, 0, 'topRight');
    addAnchor(rectGroup, 200, 138, 'bottomRight');
    addAnchor(rectGroup, 0, 138, 'bottomLeft');
	addAnchor(rectGroup, 100, 69, 'centerPoint');

    var imageObj1 = new Image();
    imageObj1.onload = function() {
        img.image(imageObj1);
		setRectZoomPoint();
        layer.draw();
    };
	
	function toRadians(degrees) {
		return degrees * (Math.PI / 180)
	};

	function toDegrees(radians) {
		return radians * (180 / Math.PI)
	};
    imageObj1.src = 'https://t4.ftcdn.net/jpg/00/78/73/53/240_F_78735333_o3qJe4bT5ciwldLIjVDulFKrDAV3jGYO.jpg';

＆＃13;

<button type="button" id='left'>left</button>
	<button type="button" id='right'>right</button>
  <div id="container"></div>
  <script
  src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
  integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
  crossorigin="anonymous">
  </script>
  <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

问题已通过画布坐标系中的旋转公式解决。