如何在旋转和调整大小后设置矩形的中心点，保持旧位置 [英] How to set center point of rectangle after rotate and resize, keep old location
本文介绍了如何在旋转和调整大小后设置矩形的中心点，保持旧位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在旋转和调整大小后尝试设置中心点，但出现了问题。
I tried set center point after rotate and resize but something is going wrong.
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';<button type="button" id='left'>left</button>
<button type="button" id='right'>right</button>
<div id="container"></div>
<script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="
crossorigin="anonymous">
</script>
推荐答案
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';<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>
问题已通过画布坐标系中的旋转公式解决。
The problem has been solved by rotation formula in canvas coordinate system.
这篇关于如何在旋转和调整大小后设置矩形的中心点，保持旧位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
