jQuery 끌기 ui를 사용하여 kineticjs를 사용하여 요소를 그리드에 스냅합니까?
https://stackoverflow.com/questions/9495610
-
14-11-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
jQuery의 새로운 것입니다 Kinetic.js를 사용하여 드래그 앤 드롭 작업을 구현했습니다 나는 HTML에 이미지가 있고 JavaScript 함수로 전달하고 드래그 할 수있게 만들고 있습니다. 두 세트의 이미지가 있습니다 .. 이제 근처에 가면 서로를 서로 스냅하고 싶습니다. 나는 jQuery의 새로운 기능이므로 IMG ID 태그를 통과 한 jQuery 작업으로 Kinetic JS 이미지 변수를 어떻게 통과 할 수 있는지 모르겠습니다. 또한 jQuery 기능을 배치 할 위치와 방법을 알아낼 수 없습니다 ..
여기 코드가 있습니다 .. 누군가 도와주세요 ..
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
#img
{
position:absolute;
left:700px;
top:150px;
}
#img1
{
position:absolute;
left:800px;
top:150px;
}
</style>
로드 jQuery 라이브러리
<script src="kinetic-v3.8.0.min.js"></script>
<script src="jquery-1.7.1.js"></script>
<script src="jquery.ui.core.js"></script>
<script src="jquery.ui.widget.js"></script>
<script src="jquery.ui.mouse.js"></script>
<script src="jquery.ui.draggable.js"></script>
Kinetic.js- 이미지를로드하고 EM DRAGGABLE
<script>
function drawImage(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 200 / 2;
var y = stage.height / 2 - 137 / 2;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
이 jQuery 함수를 사용하는 방법이 필요하고 Kinetic JS Draggable 이미지를 여기
$(function() {
$(this).draggable({ grid: [ 80, 80 ] });
});
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
드래그 할 수있는 기능
// enable drag and drop
darthVaderImg.draggable(true);
// add cursor styling
darthVaderImg.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg.on("dblclick dbltap", function(){
layer.remove(darthVaderImg);
layer.draw();
});
layer.add(darthVaderImg);
stage.add(layer);
//events
}
function drawImage2(imageObj){
var stage = new Kinetic.Stage("container", 578, 500);
var layer = new Kinetic.Layer();
var x = stage.width / 2 - 300 ;
var y = stage.height / 2 - 137 ;
var width = 200;
var height = 137;
// darth vader
var darthVaderImg2 = new Kinetic.Shape(function(){
var context = this.getContext();
context.drawImage(imageObj, x, y, width, height);
// draw invisible detectable path for image
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
// enable drag and drop
darthVaderImg2.draggable(true);
// add cursor styling
darthVaderImg2.on("mouseover", function(){
document.body.style.cursor = "pointer";
});
darthVaderImg2.on("mouseout", function(){
document.body.style.cursor = "default";
});
//remove image on double click
darthVaderImg2.on("dblclick dbltap", function(){
layer.remove(darthVaderImg2);
layer.draw();
});
layer.add(darthVaderImg2);
stage.add(layer);
}
function load(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage(this);
};
imageObj.src = img.src;
};
function load2(img){
// load image
var imageObj = new Image();
imageObj.onload = function(){
drawImage2(this);
};
imageObj.src = img.src;
};
</script>
HTML 이미지에 대한 작업을 정의하면 를 클릭합니다.
<title>HTMl5 drag drop multiple elements</title></head>
<body onmousedown="return false;">
<div id="container">
</div>
<div id="check1">
<ul id="img" class="draggable ui-widget-content" > <li><a href="#" class="draggable ui-widget-content" onclick="load(document.getElementById('i1'))">
<img src="dog.png" id="i1" class="draggable ui-widget-content" alt="doggie" width="60" height="55"/>
</a></li>
<li>
<a href="#" onclick="load(document.getElementById('i2'))">
<img src="dog2.png" id="i2" alt="Pulpit rock" width="60" height="55" /></a>
</li>
</ul>
</div>
<ul id="img1">
<li><a href="#" onclick="load2(document.getElementById('i4'))">
<img alt="doggie" src="beach.png" id="i4" width="60" height="55" />
</a></li>
<li><a href="#" onclick="load2(document.getElementById('i5'))">
<img alt="doggie" src="cat3.png" id="i5" width="60" height="55" /></a></li>
</ul>
</body>
</html>
해결책
다음 패치 (Diff Format)를 사용하여 스냅으로 드래그 할 수 있습니다.
813a814,825
> * set drag grid constraint
> */
> setDragGridConstraint: function(constraint) {
> this.attrs.dragGridConstraint = constraint;
> },
> /**
> * get drag grid constraint
> */
> getDragGridConstraint: function() {
> return this.attrs.dragGridConstraint;
> },
> /**
1847a1860,1861
> var dgc = node.attrs.dragGridConstraint;
>
1858a1873,1877
> if(dgc !== undefined) {
> newNodePos.x = Math.floor(newNodePos.x/dgc.x)*dgc.x + (dgc.x/2);
> newNodePos.y = Math.floor(newNodePos.y/dgc.y)*dgc.y + (dgc.y/2);
> }
>
RECT와 같은 것을 설정하려면 엔티티에서 드래그 할 수 있는지 확인하십시오. 그런 다음 SetDragGridConstraint ()를 사용하여 아래쪽으로 스냅을 설정할 수 있습니다.
var box = new Kinetic.Rect({
x: rectX,
y: rectY,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4,
draggable: true
});
box.setDragGridConstraint({x: 50 , y: 50});
다른 팁
이것은 약간 오래되었지만, 패치를 만드는 대신 이렇게 할 수 있습니다 :
var isNearSnapArea = function(image, snapArea) {
if (image.attrs.x > snapArea.x - 30 && image.attrs.x < snapArea.x + 30 && image.attrs.y > snapArea.y - 30 && image.attrs.y < snapArea.y + 30) {
return true;
} else {
return false;
}
}
var isNearObjectSnapArea = function(image, layer, callback) {
// What the new object will snap to if it is near it
var snapTo = { 'x': image.attrs.x, 'y': image.attrs.y };
for (var x = 0; x < layer.children.length; x++) {
var myObject = { 'x': layer.children[x].attrs.x, 'y': layer.children[x].attrs.y, '_id': layer.children[x]._id }
if(isNearSnapArea(image, myObject) && image._id !== myObject._id) {
snapTo.x = myObject.x;
snapTo.y = myObject.y + 30;
callback(snapTo);
return;
}
}
}
//Then, later in your program:
image.on('dragend', function() {
isNearObjectSnapArea(image, layer, function(snapTo) {
image.attrs.x = snapTo.x;
image.attrs.y = snapTo.y;
layer.draw();
});
});
아마이 작업을 수행하는 더 좋은 방법이 있습니다.
제휴하지 않습니다 StackOverflow
