KineticJS Canvas - 从中心点缩放组 [英] KineticJS Canvas - Scale group from center point
本文介绍了KineticJS Canvas - 从中心点缩放组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想缩放我的群组（图片和东西）。
group.setScale（zoom，zoom）;
<！DOCTYPE HTML>
< html>
< head>< / head>
< body>
< button id =larger>较大< / button>
< div id =container>< / div>
< script src =http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js>< / script>
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< script>
$（function（）{
var stage = new Kinetic.Stage（{
container：'container'，
width：400，
height：400
}）;
var layer = new Kinetic.Layer（）;
//确保设置宽度和高度
//它们是此方法工作所必需的
var group = new Kinetic.Group（{
x：100，
y：100，
width：100，
height：100
}）;
//存储原来的组中心
//以便我们可以将组定位在那里
group.cx = group.getX（）+ group.getWidth（）/ 2;
组.cy = group.getY（）+ group.getHeight（）/ 2;
//自定义比例函数到
//缩放组并居中结果
group.scale = function （x，y）{
group.setScale（x，y）;
group.setPosition（
group.cx-group.getWidth（）/ 2 * group.getScale ，
group.cy-group.getHeight（）/ 2 * group.getScale（）。y）;
group.draw（）;
}
var box1 = new Kinetic.Rect（{
x：0，
y：0，
width：50，
height： 50，
fill：blue，
stroke：'black'，
strokeWidth：4
}）;
group.add（box1）;
var box2 = new Kinetic.Rect（{
x：50，
y：50，
width：50，
height：50，
fill：green，
stroke：'black'，
strokeWidth：4
}）;
group.add（box2）;
layer.add（group）;
stage.add（layer）;
var scaleFactor = 1;
$（＃larger）。click（function（）{
scaleFactor + = 0.10;
group.scale（scaleFactor，scaleFactor）;
console.log
}）;
}）;
< / script>
< / body>
< / html>
I want to scale my group (image and something).
group.setScale(zoom, zoom);
But when i scale my group, I think it's not scale from center of my group. i think it like this
I want it scale from center like
I try more but it's not success. How can i do that, thanks.
解决方案
[Edited to better fit questioner's needs]
Here’s how to scale a Kinetic group from the centerpoint
First we store the centerX and centerY of the original group so we can keep the group centered there:
group.cx=group.getX()+group.getWidth()/2;
group.cy=group.getY()+group.getHeight()/2;
Then we write a custom scaling method that both scales the group and re-centers it:
group.scale=function(x,y){
group.setScale(x,y);
group.setPosition(
group.cx-group.getWidth()/2*group.getScale().x,
group.cy-group.getHeight()/2*group.getScale().y);
group.draw();
}
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/dVGGz/
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<button id="larger">Larger</button>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
// Be sure to set width and height
// They are required for this method to work
var group = new Kinetic.Group({
x: 100,
y: 100,
width:100,
height:100
});
// store the original group center
// so we can center the group there
group.cx=group.getX()+group.getWidth()/2;
group.cy=group.getY()+group.getHeight()/2;
// custom scale function to both
// scale the group and center the results
group.scale=function(x,y){
group.setScale(x,y);
group.setPosition(
group.cx-group.getWidth()/2*group.getScale().x,
group.cy-group.getHeight()/2*group.getScale().y);
group.draw();
}
var box1 = new Kinetic.Rect({
x: 0,
y: 0,
width: 50,
height: 50,
fill: "blue",
stroke: 'black',
strokeWidth: 4
});
group.add(box1);
var box2 = new Kinetic.Rect({
x: 50,
y: 50,
width: 50,
height: 50,
fill: "green",
stroke: 'black',
strokeWidth: 4
});
group.add(box2);
layer.add(group);
stage.add(layer);
var scaleFactor=1;
$("#larger").click(function(){
scaleFactor+=0.10;
group.scale(scaleFactor,scaleFactor);
console.log(scaleFactor);
});
});
</script>
</body>
</html>
这篇关于KineticJS Canvas - 从中心点缩放组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
