javascript - una - interfaz de usuario php
¿Usando la interfaz de usuario ejecutable jquery con cinéticaJs para hacer que los elementos se ajusten a la grilla? (2)
Esto es un poco viejo, pero, en lugar de hacer un parche, podrías hacer algo como esto:
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();
});
});
Probablemente haya una mejor manera de hacerlo, pero esto funciona.
Soy nuevo en jquery. Implementé la operación de arrastrar y soltar usando Kinetic.js. Tengo algunas imágenes en html y las paso a una función de JavaScript y las hago arrastrables. Hay dos conjuntos de imágenes. Ahora quiero para hacerlos chasquear el uno al otro si se acercan. Soy nuevo en jquery, así que no sé cómo puedo pasar la variable de imagen cinética js a una operación jquery donde han pasado la etiqueta img id. Además, no puedo averiguar dónde colocar la función jquery y cómo ...
Aquí está el código ... Alguien por favor ayuda ...
<html>
<head>
<style>
canvas {
border: 1px solid #9C9898;
}
#img
{
position:absolute;
left:700px;
top:150px;
}
#img1
{
position:absolute;
left:800px;
top:150px;
}
</style>
Cargando bibliotecas de 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- para cargar la imagen y hacer que se pueda arrastrar
<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
Necesito ayuda con esta función jquery sobre cómo usarla y pasar la imagen cinética js arrastrable aquí
$(function() {
$(this).draggable({ grid: [ 80, 80 ] });
});
context.beginPath();
context.rect(x, y, width, height);
context.closePath();
});
función arrastrable
// 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 que define la operación en el clic de la imagen
<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>
Pude modificar kinetic-v3.9.3.js para permitir el arrastre con snap-to con el siguiente parche (formato diff):
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);
> }
>
Para configurar esto para algo así como un rect, asegúrese de establecer la opción de arrastrar a verdadero en su entidad, luego puede usar setDragGridConstraint () para configurar su complemento a distancias como se muestra a continuación.
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});