Вот как позволить пользователю выбрать 2 прямоугольника, нажав на них
Вам не нужно даже [начать подключения] кнопку, пусть пользователь нажимает 2 прямоугольника и сделать соединение.
Пользователь может выбрать прямоугольник, щелкнув по нему. Затем прямоугольник будет выделен черной и красной рамкой. Пользователь может снова щелкнуть этот же прямоугольник, чтобы отменить выбор (выделение будет удалено).
Подсветка представляет собой отдельный прямоугольник, который «очерчивает» выбранный прямоугольник на черной и красной рамке. Подсветка выполняется на отдельном слое.
Во-первых, добавить пару пользовательских свойств для каждого прямоугольника.
// isHighlighted is just an on/off flag
// to mark this rectangle as highlighted by the user.
rect.isHighlighted=false;
// highlight is a second rectangle that “highlights” this rectangle
rect.highlight=null;
// Add a click event that toggles highlighting on/off
// whenever the user clicks on this rectangle
rect.on("click",function(){
highlight(this);
target.draw();
});
Эта функция переключает подсветку прямоугольника вкл/выкл, когда пользователь нажимает на нее.
Эта функция также проверяет, выделены ли 2 прямоугольника, чтобы вы могли их соединить.
Да ... вы нашли хороший пост о том, как сделать подключение:
KineticJS drag a box with line connected
// create a counter of highlighted rectangles
var highlightCount=0;
// when any rectangle is clicked, toggle its highlight on/off
function highlight(rect){
if(rect.highlighted){
rect.isHighlighted=false;
rect.highlight.remove();
highlightCount--;
}else{
var x=rect.getX()-8;
var y=rect.getY()-8;
var width=rect.getWidth()+16;
var height=rect.getHeight()+16;
var highlight=kRect(x,y,width,height,"red","black",3,target);
rect.isHighlighted=true;
rect.highlight=highlight;
highlightCount++;
// if 2 rectangles are highlighted, connect them
if(highlightCount==2){
var results="Connect these rectangles: ";
var children=layer.getChildren();
for(var i=0;i<children.length;i++){
if(children[i].isHighlighted){
results+="["+i+"]";
}
}
alert(results);
}
}
}
Вот код и Fiddle: http://jsfiddle.net/m1erickson/MBPkn/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
// create a target layer where highlights are drawn
var target = new Kinetic.Layer({name:"target"});
stage.add(target);
// create the regular layer
var layer = new Kinetic.Layer({name:"layer"});
stage.add(layer);
// create 4 rectangles
var rect1=kRect(50,50,40,40,"lightgray","skyblue",6,layer);
var rect2=kRect(125,125,40,40,"lightgray","skyblue",6,layer);
var rect3=kRect(200,50,40,40,"lightgray","skyblue",6,layer);
var rect5=kRect(275,125,40,40,"lightgray","skyblue",6,layer);
// create a counter of highlighted rectangles
var highlightCount=0;
// when any rectangle is clicked, toggle its highlight on/off
function highlight(rect){
if(rect.highlighted){
rect.isHighlighted=false;
rect.highlight.remove();
highlightCount--;
}else{
var x=rect.getX()-8;
var y=rect.getY()-8;
var width=rect.getWidth()+16;
var height=rect.getHeight()+16;
var highlight=kRect(x,y,width,height,"red","black",3,target);
rect.isHighlighted=true;
rect.highlight=highlight;
highlightCount++;
if(highlightCount==2){
var results="Connect these rectangles: ";
var children=layer.getChildren();
for(var i=0;i<children.length;i++){
if(children[i].isHighlighted){
results+="["+i+"]";
}
}
alert(results);
}
}
}
// build the specified KineticJS Rectangle and add it to the stage
function kRect(x,y,width,height,fill,stroke,strokewidth,layer){
var rect = new Kinetic.Rect({
x: x,
y: y,
width: width,
height: height,
fill: fill,
stroke: stroke,
strokeWidth: strokewidth
});
// if this is not a highlight, make it highlight-able
if(layer.getName()!="target"){
rect.isHighlighted=false;
rect.highlight=null;
rect.on("click",function(){
highlight(this);
target.draw();
});
}
layer.add(rect);
stage.draw();
return(rect);
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
У вас есть какие-либо код того, что вы пробовали? –