使用KineticJS缩放组 [英] zooming a group with KineticJS
问题描述
这是我有的结构
图层：
ParentGroup：
-Kinetic Image
-ChildGroup
- 动力矩形
- 动力学文本
图像（我从服务器检索），有一个感兴趣的区域。该感兴趣的区域由矩形（这里的动力学矩形）示出。我在这个区域内写了一些标签（这是动力学文本）。
我想对整个组应用一些操作。翻译是确定，但我有缩放和旋转的问题。这是我的缩放函数
function zoomIn（）{
var scale = parentGroup.getScale
scale.x * = zoomFactor; // zoomFactor是一个全局变量
scale.y * = zoomFactor;
parentGroup.setScale（scale）;
layer.draw（）
}
被放大，但同时被翻译（向右和向下）。如果我继续缩放，图像会从画布中移出。
我试过，在绘制图层之前： parentGroup.setPosition（0,0）; //虽然我知道我从来没有修改过这个位置，已变更。
我在这里阅读 KineticJS Canvas - 从中心点缩放组，这可能是缩放中心的问题。但是因为我没有为parentGroup设置任何高度或宽度，所以我不知道如何适应我的代码。
现在我有什么问题？
KineticJS：如何缩放，旋转和拖动组 strong>[基于对问题需求的更好理解简化了原始答案]
编码变得更简单，因为
注册点是缩放变换的缩放点和旋转的旋转点。
以下是如何将注册点设置为组中心的方法：
/ set group offset to the group's centerpoint
parentGroup.setOffset（parentGroup.getWidth（）/ 2，parentGroup.getHeight（）/ 2）;
设置注册点后，只需使用group.setScale和group.rotateDeg：
//从中心点缩放组
parentGroup.setScale（parentGroup.getScale（）。x + 0.10） ;
//在其中心点旋转组
parentGroup.rotateDeg（30）;
这里是代码和小提琴： http://jsfiddle.net/m1erickson/XWW7Z/
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< script type =text / javascriptsrc =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是用于jquery事件
//所以使它全局
var parentGroup;
//加载图像，然后启动应用程序
var image = new Image（） ;
image.onload = function（）{
start（）;
}
image.src =https://dl.dropboxusercontent.com/u/139992952/stackoverflow /house-icon.png;
//构建一切，线事件
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）;
//这个大纲rect只是为了说明
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（）;
//在parentGroup注册点放大+0.10
$（＃larger）click（function（）{
parentGroup.setScale .getScale（）。x + 0.10）;
layer.draw（）;
}）;
//在parentGroup注册点缩小+0.10
$（＃smaller）click（function（）{
parentGroup.setScale（parentGroup.getScale .x-0.10）;
layer.draw（）;
}）;
//在parentGroup注册点上将CW旋转30度。
$（＃rotateCW）click（function（）{
parentGroup.rotateDeg（30）;
layer.draw（）;
}）;
//在parentGroup注册点将CCW旋转30度
$（＃rotateCCW）click（function（）{
parentGroup.rotateDeg（-30）;
layer .draw（）;
}）;
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< button id =larger>较大< / button>
< button id =smaller>较小< / button>
< button id =rotateCW>顺时针旋转< / button>
< button id =rotateCCW>旋转CCW< / button>
< div id =container>< / div>
< / body>
< / html>
Here is the structure I have
Layer:
ParentGroup:
-Kinetic Image
-ChildGroup
- Kinetic rectangle
- Kinetic Text
On my kinetic image (that I retrieve from the server), there is a region of interest. This region of interest is shown by a rectangle (kinetic rectangle here). And I write some label inside this region (which is the kinetic text).
I would like to apply some manipulations to the whole group. Translation is ok, but I have problems with zoom and rotation. Here is my zoom function
function zoomIn() {
var scale=parentGroup.getScale();
scale.x *= zoomFactor; //zoomFactor is a global variable
scale.y *= zoomFactor;
parentGroup.setScale(scale);
layer.draw()
}
What happened here is that the group was zoomed in but translated (right and down) at the same time. If I keep zooming, the image goes out of the canvas.
I tried, before drawing the layer : parentGroup.setPosition (0,0); //although I know that I've never modified this position, but nothing changed.
I read here KineticJS Canvas - Scale group from center point that it is maybe a problem of center of zooming. But as I don't set any height or width to may parentGroup, I didn't know how to adapt my code.
What's wrong with what I have right now? Thank you in advance!
KineticJS: How to Zoom, Rotate and Drag a Group
[simplified the original answer based on better understanding of questioners needs]
Coding becomes much simpler since you allow your registration point for your group to be its centerpoint.
The registration point is the scaling point for scale transforms and the rotation point for rotations.
Here is how to set the registration point to the center of the group:
// set the group offset to the group’s centerpoint
parentGroup.setOffset(parentGroup.getWidth()/2,parentGroup.getHeight()/2);
After setting the registration point, just use group.setScale and group.rotateDeg normally:
// scale the group from its centerpoint
parentGroup.setScale(parentGroup.getScale().x+0.10);
// rotate the group at its centerpoint
parentGroup.rotateDeg(30);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/XWW7Z/
<!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>
这篇关于使用KineticJS缩放组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
