캔버스에서 드래그 할 수있는 두 개의 KineticJs 사각형이 있습니다. 그리기 선 또는 cntrl과 같은 키보드 수정자를 클릭하는 것과 같은 수정자를 사용하고 직사각형 중 하나를 클릭하고 직사각형을 드래그하여 직사각형을 연결하는 간단한 선을 그릴 수 있습니다. 선은 각 직사각형에 연결되어야하므로 직사각형 중 하나가 움직이면 선은 계속 연결된 채로 유지됩니다. KineticJS drag a box with line connectedKineticJS 두 도형 사이의 선 그리기
하지만 내 첫 번째 문제 좀 도와 리소스를 찾을 수 없습니다 :
질문의 두 번째 부분은이 게시물에서 해결 될 것으로 보인다.
다음은 사용자가
당신도 필요가 없습니다 그들을 클릭하여이 사각형을 선택하도록하는 방법은 A [시작 연결] 버튼을, 단지 사용자가 클릭 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();
});
이 기능은 사용자가 클릭 할 때 사각형의 강조 표시를 설정/해제합니다.
이 함수는 또한 두 개의 사각형을 강조 표시하여 연결할 수 있는지 테스트합니다.
예 ... 당신이 수행하는 방법에 대한 좋은 게시물을 볼 수있는 연결 :
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);
}
}
}
코드와 바이올린입니다 : 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>
대단히 감사합니다! 난 그냥 만든 사각형 대신 사용할 kineticjs 모양의 내 자신의 그룹을 사용하는 방법을 알아 내려고 노력하고있어. 그룹 (rect + text)을 만드는 버튼이 있습니다. 강조 표시를 켜고 단추에 기능을 연결하려고 할 때 내가 그것을 누르면 내 자신의 그룹을 클릭 할 수 있습니다. 그걸 어떻게하는 지 아는가? 하이라이트 기능에서 내 그룹을 매개 변수로 포함시켜야합니까? – user2379124
나는 생각한다. 나는 네가 무엇을 요구 하는지를 이해한다. 따라서 직사각형 대신 그룹을 강조 표시하려고합니다. 쉬워야합니다. 강조 표시는 실제로 강조 표시되는 모든 객체보다 약간 뒤에있는 사각형입니다. 강조 표시하려는 객체가 유효한 getX, getY, getWidth 및 getHeight를 갖고있는 한 그룹 객체를 강조 표시 기능에 공급할 수 있어야합니다. 각 그룹에도 .isHighlighted, .highlight 및 클릭 할 때의 이벤트를 추가해야합니다. hightlight 함수에서 alert()이 어디에 있는지 확인하십시오. 두 그룹을 연결하는 코드를 넣을 수 있습니다. – markE
네가 내가 원하는 것을 정확히 이해하고있다. 제 코드를 살펴 보시겠습니까? 내 그룹에 클릭 강조 표시 기능을 추가하면 더 이상 끌지 않습니다. http://jsfiddle.net/MBPkn/2/ – user2379124
당신은 어떤을해야합니까는 당신이 시도한 코드? –