如何扩展其作为起源中心的形状？ [英] How to scale a shape from its center as origin?
问题描述
我有以下的，code，这工作完全正常，除了它扩展从左上角为原点的形状，但我想它从它的原产中心规模。应该怎么做，在客场，动画将开始从当鼠标停留在形状中心扩展，并从中心再次缩小到原来的尺寸为原点？
＆LT; DIV ID =六角菜单＆GT;＆LT; / DIV＆GT;
＆LT;脚本SRC =JS / kinetic.min.js字符集=utf-8＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本延迟=延迟类型=文/ JavaScript的＆GT;
功能makeHex（X，Y，填写）{
VAR十六进制=新Kinetic.Shape（{
X：X，
Y：Y，
填写：填写，
//一个Kinetic.Canvas渲染器传递到drawFunc功能
drawFunc：功能（油画）{
VAR上下文= canvas.getContext（）;
context.save（）;
context.translate（X，Y）;
context.beginPath（）;
context.moveTo（0.1，51.9）;
context.bezierCurveTo（0.1，43.6，4.6，35.8，11.9，31.6）;
context.lineTo（61.0，3.3）;
context.bezierCurveTo（68.2，-0.9，77.2，-0.9，84.4，3.3）;
context.lineTo（133.6，31.6）;
context.bezierCurveTo（140.8，35.8，145.3，43.6，145.3，52.0）;
context.lineTo（145.3，108.7）;
context.bezierCurveTo（145.3，117.1，140.8，124.8，133.6，129.0）;
context.lineTo（84.4，157.4）;
context.bezierCurveTo（77.2 161.5 68.2 161.5，61.0，157.4）;
context.lineTo（11.9，129.0）;
context.bezierCurveTo（4.6，124.8，0.1，117.0，0.1，108.7）;
context.lineTo（0.1，51.9）;
context.closePath（）;
canvas.fillStroke（本）;
context.restore（）;
}
}）;
返回十六进制;
}
功能变焦（节点）{
VAR吐温=新Kinetic.Tween（{
节点：节点，
持续时间：0.5，
将scaleX：1.2，
的scaleY：1.2
}）;
返回吐温;
}
功能AddAnimation（节点，吐温）{
node.on（'鼠标悬停'，函数（）{
tween.play（）;
}）;
node.on（'鼠标离开'，函数（）{
tween.reverse（）;
}）;
}
VAR阶段=新Kinetic.Stage（{
容器：六角菜单，
宽度：513，
身高：484
}）;
VAR shapesLayer =新Kinetic.Layer（）;
变种家= makeHex（80，90，'RGB（19，217，209）'，50）;
shapesLayer.add（家）;
stage.add（shapesLayer）;
VAR zoomHome =缩放（家）;
AddAnimation（家庭，zoomHome）;
＆LT; / SCRIPT＆GT;
您需要将偏移属性设置为使用一些三角形状的中心。默认情况下 Kinetic.Circle 和 Kinetic.Ellipse 中的中心偏移，而形状的其余部分抵消左上角
在这个例子中，我设置的偏移量的宽度和高度（50和25）的一半，但你需要做一些计算，你的十六进制对象获取中心点。
VAR RECT =新Kinetic.Rect（{
X：239，
Y：75，
宽度：100，
高度：50，
填写：绿色，
行程：'黑'，
strokeWidth：4，
偏差：{X：50 Y：25}
}）;
或者你可以使用的方法的getOffset（）和 setOffset（）
http://kineticjs.com/docs/Kinetic.Shape.html#getOffset
http://kineticjs.com/docs/Kinetic.Shape.html#setOffset
I have the following, code, that works perfectly fine, except that it scales the shape from top left corner as origin, but I want it to scale from its center as origin. How should do that in away, the animation will start to scale up from center of the shape when moused over, and scale down to original size again from center as origin?
<div id="hex-menu"></div>
<script src="js/kinetic.min.js" charset="utf-8"></script>
<script defer="defer" type="text/javascript">
function makeHex(x, y, fill) {
var hex = new Kinetic.Shape({
x: x,
y: y,
fill: fill,
// a Kinetic.Canvas renderer is passed into the drawFunc function
drawFunc: function (canvas) {
var context = canvas.getContext();
context.save();
context.translate(x, y);
context.beginPath();
context.moveTo(0.1, 51.9);
context.bezierCurveTo(0.1, 43.6, 4.6, 35.8, 11.9, 31.6);
context.lineTo(61.0, 3.3);
context.bezierCurveTo(68.2, -0.9, 77.2, -0.9, 84.4, 3.3);
context.lineTo(133.6, 31.6);
context.bezierCurveTo(140.8, 35.8, 145.3, 43.6, 145.3, 52.0);
context.lineTo(145.3, 108.7);
context.bezierCurveTo(145.3, 117.1, 140.8, 124.8, 133.6, 129.0);
context.lineTo(84.4, 157.4);
context.bezierCurveTo(77.2, 161.5, 68.2, 161.5, 61.0, 157.4);
context.lineTo(11.9, 129.0);
context.bezierCurveTo(4.6, 124.8, 0.1, 117.0, 0.1, 108.7);
context.lineTo(0.1, 51.9);
context.closePath();
canvas.fillStroke(this);
context.restore();
}
});
return hex;
}
function Zoom(node) {
var tween = new Kinetic.Tween({
node: node,
duration: 0.5,
scaleX: 1.2,
scaleY: 1.2
});
return tween;
}
function AddAnimation(node, tween) {
node.on('mouseover', function() {
tween.play();
});
node.on('mouseleave', function() {
tween.reverse();
});
}
var stage = new Kinetic.Stage({
container: 'hex-menu',
width: 513,
height: 484
});
var shapesLayer = new Kinetic.Layer();
var home = makeHex(80, 90, 'rgb(19, 217, 209)', 50);
shapesLayer.add(home);
stage.add(shapesLayer);
var zoomHome = Zoom(home);
AddAnimation(home, zoomHome);
</script>
You need to set the offset property to the centre of the shape using some trigonometry. By default Kinetic.Circle and Kinetic.Ellipse are offset in the centre, while the rest of the shapes are offset on the top left.
In this example I'm setting the offset to half of the width and height (50 and 25), but you'll need to do some calculations on your hex object to get the centre point.
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: {x: 50, y: 25}
});
Or you can use the methods getOffset() and setOffset()
http://kineticjs.com/docs/Kinetic.Shape.html#getOffset http://kineticjs.com/docs/Kinetic.Shape.html#setOffset
这篇关于如何扩展其作为起源中心的形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
