This is an improved way of setting your dragBoundFunc
The secret with dragBoundFunc is to allow it to execute fast. Remember that it is being executed with every mousemove.
So, pre-calculate all the minimum and maximum boundaries before and outside dragBoundFunc, like this:
// pre-calc some bounds so dragBoundFunc has less calc's to do
var height=orangeRect.getHeight();
var minX=white.getX();
var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
var minY=white.getY();
var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();
That way your dragBoundFunc can just test the current position against these pre-calc’ed bounds like this:
dragBoundFunc: function(pos) {
var X=pos.x;
var Y=pos.y;
if(X<minX){X=minX;}
if(X>maxX){X=maxX;}
if(Y<minY){Y=minY;}
if(Y>maxY){Y=maxY;}
return({x:X, y:Y});
}
Here’s code and a Fiddle: http://jsfiddle.net/m1erickson/n5xMs/
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 10px;
}
canvas{border:1px solid red;}
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.1.min.js"></script>
<script>
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layer = new Kinetic.Layer();
var white = new Kinetic.Rect({
x: 20,
y: 20,
width: 300,
height: 300,
fill: 'white',
stroke: 'black',
strokeWidth: 2
});
var orangeGroup = new Kinetic.Group({
x: stage.getWidth() / 2,
y: 70,
draggable: true,
dragBoundFunc: function(pos) {
var X=pos.x;
var Y=pos.y;
if(X<minX){X=minX;}
if(X>maxX){X=maxX;}
if(Y<minY){Y=minY;}
if(Y>maxY){Y=maxY;}
return({x:X, y:Y});
}
});
var orangeText = new Kinetic.Text({
fontSize: 26,
fontFamily: 'Calibri',
text: 'boxed in',
fill: 'black',
padding: 10
});
var orangeRect = new Kinetic.Rect({
width: orangeText.getWidth(),
height: orangeText.getHeight(),
fill: 'orange',
stroke: 'blue',
strokeWidth: 4
});
orangeGroup.add(orangeRect).add(orangeText);
layer.add(white);
layer.add(orangeGroup);
stage.add(layer);
// pre-calc some bounds so dragBoundFunc has less calc's to do
var height=orangeRect.getHeight();
var minX=white.getX();
var maxX=white.getX()+white.getWidth()-orangeRect.getWidth();
var minY=white.getY();
var maxY=white.getY()+white.getHeight()-orangeRect.getHeight();
</script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
