Snap to Grid Operation usando imágenes, kinetic.js, javascript?
-
13-11-2019 - |
Pregunta
¿Puedo implementar la operación de Snap to Grid con imágenes en Kineticjs usando jQuery?( http://jqueryui.com/demos/dragle/snap-to.html) Como tengo pocas imágenes de arrastre dentro de un lienzo y quiero que restrinjen el movimiento dentro de un lienzo ...
¿Es incluso posible que 2 imágenes se pueden juntar cuando se acerca a la otra en el lienzo? Y se puede lograr usando kinetic.js o javascript ...
gracias Ashish
Aquí está el código .. Es un poco complicado.Quiero decir, estoy cargando imágenes de fuera del lienzo ... y hay dos conjuntos ... Ahora quiero que un set pueda encajar a otro.
<script src="kinetic-v3.8.0.min.js">
</script>
<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
<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>
<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.clearRect(x,y,width,height);
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
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);
$( ".darthVaderImg2" ).draggable({ grid: [ 20,20 ] });
}
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>
<title>HTMl5 drag drop multiple elements</title></head>
<body onmousedown="return false;">
<div id="container">
</div>
<div id="check1">
<ul id="img"> <li><a href="#"onclick="load(document.getElementById('i1'))">
<img class="ui-widget-header" src="dog.png" id="i1" 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>
Solución
Presenté una respuesta a esta pregunta que no usa JQuery.En su lugar, hay un parche que puede aplicar, lo cual le da arrastrar y soltar con Snap to Grid en Kineticjs en el lienzo HTML5.
usando jQuery draggable ui¿Con Kineticjs para hacer que los elementos se ajusten a la cuadrícula?
Otros consejos
Puede hacerlo diferente usando el Dragboundfunc.
return {
x: Math.round(pos.x / grid) * grid,
y: Math.round(pos.y / grid) * grid
}
He creado un ejemplo completo de snapping: http://jsfiddle.net/ptzsb/1/
Todo esto es muy posible. Sin embargo, requiere ser un poco más familiar que el usuario jquery promedio.
primero, implementando el complemento a:
Esta es una idea simple. Utiliza la biblioteca jQuery UI. Agrega la función necesaria para la función 'Snap-to', invocando 'Snap-to' en todos los elementos con la clase de 'kineticjsimage'.
$( ".KineticJsImage" ).draggable({ snap: true });
segundo, para todas las imágenes promovidas por Kineticjs, agregamos la clase 'KineticjsImage'
..I don't have anything to work with here...
You simply need to find where the image output is controlled and add a class
of KineticJsImage to the code.
Como mencionó en su primera pregunta, encontrará la operación de Snap-to. El segundo cuadro en la demostración en esa página utiliza el ajuste genérico (código que mencionado anteriormente, también): parámetro verdadero. Cuando lo invoca esto, le dice a la página que para ajustar todos los elementos de arrastre con la clase de 'kineticjsimage' a cualquier elemento que también se haya declarado dragle.
$(".someElement").draggable({ snap: false }); // drags wherever, does not snap.
$(".KineticJsImage").draggable({snap: true }); // drags everywhere, snaps to anything.
$(".KineticJsImage").draggable({snap: '.KineticJsImage' }); // This will ensure that
any element with the class of 'KineticJsImage' is not only draggable, but will snap
to any other element with the class of' 'KineticJsImage' that is also draggable.
Todo lo que desea lograr es hacer capaz de jQuery UI y las extensiones de arrastre / gotipable que se proporcionan dentro.
Tonto y trata de averiguarlo. Cuando no puedes, vuelve con el código y te mostraremos dónde ir allí. $ ("