使用jQuery拖动UI与kineticJs使元素捕捉到网格？ [英] Using jquery draggable UI with kineticJs to make elements snap to grid?
本文介绍了使用jQuery拖动UI与kineticJs使元素捕捉到网格？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经实现拖放操作使用Kinetic.js
我有一些图像在html，我传递给一个javascript函数，并使它们拖动..有两套图像..
现在我想让它们相互碰巧，如果他们靠近。
我是jQuery的新手，所以我不知道如何将动态js图像变量传递给一个jQuery操作，他们已经通过了img id标签。
此外，我无法弄清楚jquery功能的放置位置，如何..
这是代码..
有人请帮助..
< html>
< head>
< style>
画布{
border：1px solid＃9C9898;
}
#img
{
position：absolute;
剩余：700px;
顶部：150px;
}
＃img1
{
position：absolute;
left：800px;
顶部：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-加载图片并使其可拖放
< script>
函数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）;
//绘制图像的隐形可检测路径
需要帮助这个jquery函数如何使用它并在这里传递kinetic js draggable图像
$（function（）{
$（this）.draggable（{grid：[80，80]}）;
}）;
context.beginPath（） ;
context.rect（x，y，width，height）;
context.closePath（）;
}）;
可拖动功能
code> //启用拖放
darthVaderImg.draggable（true）;
//添加光标样式
darthVaderImg.on（mouseover，function（）{
document.body.style.cursor =pointer;
} ）;
darthVaderImg.on（mouseout，function（）{
document.body.style.cursor =default;
}）;
//双击删除图像
darthVaderImg.on（dblclick dbltap，function（）{
layer.remove（darthVaderImg）;
layer.draw（）;
}）;
layer.add（darthVaderImg）;
stage.add（layer）;
//事件
}
函数drawImage2（imageObj）{
var stage = new Kinetic.Stage 集装箱，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）;
//绘制图像的隐形可检测路径
context.beginPath（）;
上下文。 rect（x，y，width，height）;
context.closePath（）;
}）;
//启用拖放
darthVaderImg2.draggable（true）;
//添加光标样式
darthVaderImg2.on（mouseover，function（）{
document.body.style.cursor =pointer;
} ）;
darthVaderImg2.on（mouseout，function（）{
document.body.style.cursor =default;
}）;
//双击删除图像
darthVaderImg2.on（dblclick dbltap，function（）{
layer.remove（darthVaderImg2）;
layer.draw（）;
}）;
layer.add（darthVaderImg2）;
stage.add（layer）;
}
函数加载（img）{
//加载图像
var imageObj = new Image（） ;
imageObj.onload = function（）{
drawImage（this）;
};
imageObj.src = img.src;
};
函数load2（img）{
//加载图像
var imageObj = new Image（）;
imageObj.onload = function（）{
drawImage2（this）;
};
imageObj.src = img.src;
};
< / script>
在图片点击上定义操作的Html
< title> HTMl5拖放多个元素< / title>< / head>
< body onmousedown =return false;>
< div id =container>
< / div>
< div id =check1>
< ul id =imgclass =draggable ui-widget-content> < li>< a href =＃class =draggable ui-widget-contentonclick =load（document.getElementById（'i1'））>
< img src =dog.pngid =i1class =draggable ui-widget-contentalt =doggiewidth =60height =55/>
< / a>< / li>
< li>
< a href =＃onclick =load（document.getElementById（'i2'））>
< img src =dog2.pngid =i2alt =Pulpit rockwidth =60height =55/>< / a>
< / li>
< / ul>
< / div>
< ul id =img1>
< li>< a href =＃onclick =load2（document.getElementById（'i4'））>
< img alt =doggiesrc =beach.pngid =i4width =60height =55/>
< / a>< / li>
< li>< a href =＃onclick =load2（document.getElementById（'i5'））>
< img alt =doggiesrc =cat3.pngid =i5width =60height =55/>< / a>< / li>
< / ul>
< / body>
< / html>
解决方案
我可以修改 kinetic-v3.9.3.js 使用下面的补丁启用拖拽（diff格式）：
813a814,825
> *设置拖动网格约束
> * /
> setDragGridConstraint：function（constraint）{
> this.attrs.dragGridConstraint = constraint;
> }，
> / **
> *拖动网格约束
> * /
> getDragGridConstraint：function（）{
>返回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这样的东西，请确保将draggable设置为true，那么你可以使用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}）;
I'm new to jquery I have implemented drag and drop operation using Kinetic.js I have some images in html and I'm passing them to a javascript function and making them draggable..There are two sets of images.. Now I want to make them snap to each other if they get near. I'm new to jquery so I don't know how can I pass the kinetic js image variable into a jquery operation where they have passed the img id tag. Also I'm not able to figure out where to place the jquery function and how..
Here is the code.. Someone please help..
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
#img
{
position:absolute;
left:700px;
top:150px;
}
#img1
{
position:absolute;
left:800px;
top:150px;
}
</style>
Loading jquery libraries
<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- to load image and make 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
Need some help with this jquery function how to use it and pass the kinetic js draggable image here
$(function() {
$(this).draggable({ grid: [ 80, 80 ] });
});
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
draggable function
// 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 defining operation on image click
<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>
解决方案
I was able to modify kinetic-v3.9.3.js to enable dragging with snap-to with the following patch (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);
> }
>
To set this up for something like a rect, make sure you set draggable to true on your entity, then you can use setDragGridConstraint() to set up your snap to distances as below.
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});
这篇关于使用jQuery拖动UI与kineticJs使元素捕捉到网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
