Javascript 使用KineticJS缩放组
这是我的结构Javascript 使用KineticJS缩放组,javascript,canvas,zooming,kineticjs,Javascript,Canvas,Zooming,Kineticjs,这是我的结构 Layer: ParentGroup: -Kinetic Image -ChildGroup - Kinetic rectangle - Kinetic Text 在我的动态图像（从服务器检索）上，有一个感兴趣的区域。该感兴趣区域由一个矩形（此处为运动矩形）显示。我在这个区域内写了一些标签（这是动力学文本） 我想对整个团队进行一些操作。翻译是可以的，但我有缩放和旋转的问题。这是我的缩放功能 function zoomIn
Layer:
ParentGroup:
-Kinetic Image
-ChildGroup
- Kinetic rectangle
- Kinetic Text
function zoomIn() {
var scale=parentGroup.getScale();
scale.x *= zoomFactor; //zoomFactor is a global variable
scale.y *= zoomFactor;
parentGroup.setScale(scale);
layer.draw()
}
parentGroup.setPosition（0,0）//虽然我知道我从未修改过这个位置，但没有任何改变
我在这里读到，这可能是缩放中心的问题。但由于我没有为may parentGroup设置任何高度或宽度，所以我不知道如何修改代码
我现在所拥有的有什么问题吗？KineticJS：如何缩放、旋转和拖动群组
[基于对提问者需求的更好理解，简化了原始答案]
由于您允许您的组的注册点作为其中心点，因此编码变得更加简单
注册点是缩放变换的缩放点和旋转的旋转点
以下是如何将注册点设置为组的中心：
// set the group offset to the group’s centerpoint
parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);
设置注册点后，正常使用group.setScale和group.rotateDeg即可：
// scale the group from its centerpoint
parentGroup.setScale(parentGroup.getScale().x+0.10);
// rotate the group at its centerpoint
parentGroup.rotateDeg(30);
下面是代码和小提琴：
正文{padding:15px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：400px；
高度：400px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：400，
身高：400
});
var layer=新的动能层（）；
阶段。添加（层）；
//parentGroup用于jquery事件中
//因此，让它全球化
var父组；
//加载图像，然后启动应用程序
var image=新图像（）；
image.onload=function（）{
start（）；
}
image.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
//构建一切，连接事件
函数start（）{
parentGroup=新的动力学组({
x:image.width/2，
y:image.height/2，
宽度：image.width，
高度：image.height，
德拉格布尔：是的
});
parentGroup.setOffset（parentGroup.getWidth（）/2，parentGroup.getHeight（）/2）；
添加（父组）；
var kImage=新的动力学图像({
图像：图像，
x:0,，
y:0，
宽度：image.width，
高度：image.height
});
parentGroup.add（kImage）；
var childGroup=新的动力学组({
x:0,，
y:0，
宽度：100，
身高：50
});
parentGroup.add（childGroup）；
//此轮廓矩形仅用于说明
var boundingRect=新的动能.Rect({
x:0,，
y:0，
宽度：parentGroup.getWidth（），
高度：parentGroup.getHeight（），
笔画：“黑色”，
冲程宽度：.75
});
parentGroup.add（boundingRect）；
var childRect=new dynamic.Rect({
x:0,，
y:0，
宽度：105，
身高：25，
笔画：“浅灰色”，
填充：“天蓝色”
});
添加（childRect）；
var childText=new dynamic.Text({
x:5，
y:3，
尺码：18，
文字：“你好，世界”，
填充：“蓝色”
});
添加（childText）；
layer.draw（）；
//在父组注册点放大+0.10
$（“#更大”）。单击（函数（）{
parentGroup.setScale（parentGroup.getScale（）.x+0.10）；
layer.draw（）；
});
//在父组注册点按+0.10的比例缩小
$（“#更小”）。单击（函数（）{
parentGroup.setScale（parentGroup.getScale（）.x-0.10）；
layer.draw（）；
});
//在父组注册点顺时针旋转30度
$（“#rotateCW”）。单击（函数（）{
父母组：旋转组（30）；
layer.draw（）；
});
//在父组注册点逆时针旋转30度
$（“#rotateCW”）。单击（函数（）{
父组。旋转体（-30）；
layer.draw（）；
});
}
}); // end$（函数（）{}）；
更大的
更小
顺时针旋转
逆时针旋转
问题写得很好，干得好！不幸的是，对于这种类型的问题，如果您能为我们提供一个JSFIDLE，帮助您会容易得多。。尽管markE在你链接的答案的评论中提到，如果你不设置父组的高度或宽度，那么你可以设置任意的中心点来放大。事实上，我写了一个简化版本的代码。我不确定我能不能把它放在一个文件夹里。但我再次读了马克的评论，我认为这就是我需要做的。当我想将缩放的中心设置为画布的中心时，我将组的位置设置为（innerWidth（）/2，innerHeight（）/2）。但是没用，我现在正在做旋转。我将偏移量设置为图像的中心，这样组可以围绕其中心旋转。但它不起作用。为什么在代码中需要将scalePT除以scaleFactor？如果我在旋转，这是否意味着我需要引入旋转角度来计算偏移量？ScalePt/scaleFactor正在撤消以前的缩放变换，撤消以前的偏移量，为新变换做准备。关于其他变换，比如旋转，你是co
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<style>
body{ padding:15px; }
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
// parentGroup is used in jquery events
// so make it global
var parentGroup;
// load the image and then start the app
var image=new Image();
image.onload=function(){
start();
}
image.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png";
// build everything, wire events
function start(){
parentGroup=new Kinetic.Group({
x:image.width/2,
y:image.height/2,
width:image.width,
height:image.height,
draggable:true
});
parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);
layer.add(parentGroup);
var kImage=new Kinetic.Image({
image:image,
x:0,
y:0,
width:image.width,
height:image.height
});
parentGroup.add(kImage);
var childGroup=new Kinetic.Group({
x:0,
y:0,
width:100,
height:50
});
parentGroup.add(childGroup);
// this outline rect is just for illustration
var boundingRect=new Kinetic.Rect({
x:0,
y:0,
width:parentGroup.getWidth(),
height:parentGroup.getHeight(),
stroke:"black",
strokeWidth:.75
});
parentGroup.add(boundingRect);
var childRect=new Kinetic.Rect({
x:0,
y:0,
width:105,
height:25,
stroke:"lightgray",
fill:"skyblue"
});
childGroup.add(childRect);
var childText=new Kinetic.Text({
x:5,
y:3,
fontSize:18,
text:"Hello, World",
fill:"blue"
});
childGroup.add(childText);
layer.draw();
// scale up by +0.10 at parentGroup registration point
$("#larger").click(function(){
parentGroup.setScale(parentGroup.getScale().x+0.10);
layer.draw();
});
// scale down by +0.10 at parentGroup registration point
$("#smaller").click(function(){
parentGroup.setScale(parentGroup.getScale().x-0.10);
layer.draw();
});
// rotate CW by 30 degrees at parentGroup registration point
$("#rotateCW").click(function(){
parentGroup.rotateDeg(30);
layer.draw();
});
// rotate CCW by 30 degrees at parentGroup registration point
$("#rotateCCW").click(function(){
parentGroup.rotateDeg(-30);
layer.draw();
});
}
}); // end $(function(){});
</script>
</head>
<body>
<button id="larger">Larger</button>
<button id="smaller">Smaller</button>
<button id="rotateCW">Rotate clockwise</button>
<button id="rotateCCW">Rotate CCW</button>
<div id="container"></div>
</body>
</html>