Opération SNAP à la grille à l'aide d'images, kinetic.js, javascript?
-
13-11-2019 - |
Question
Puis-je implémenter le fonctionnement SNAP TO GRID avec des images dans KineticJS à l'aide de jQuery? (http://jqueryui.com/demos/draggable/snap-to.html) Comme j'ai quelques images dragables à l'intérieur d'une toile et je veux qu'elles restreignent le mouvement à l'intérieur d'une toile ...
Est-il même possible que 2 images puissent s'enclencher lorsque l'une s'approche de l'autre dans la toile ?? Et peut-il être réalisé en utilisant kinetic.js ou javascript ...
Merci Ashish
Voici le code .. c'est un peu compliqué. Je veux dire que je charge des images de l'extérieur de la toile ... et il y a deux ensembles ... maintenant je veux qu'un ensemble puisse se casser à d'autres.
<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>
La solution
J'ai soumis une réponse à cette question qui n'utilise pas jQuery. Au lieu de cela, il y a un patch que vous pouvez appliquer qui vous donne un glisser-déposer avec un snap à la grille en kineticjs sur la toile HTML5.
Autres conseils
Vous pouvez le faire différent en utilisant le dragboundfunc.
return {
x: Math.round(pos.x / grid) * grid,
y: Math.round(pos.y / grid) * grid
}
J'ai créé un exemple de capture complet: http://jsfiddle.net/ptzsb/1/
Tout cela est très possible. Cela nécessite cependant d'être un peu plus familier que l'utilisateur de jQuery moyen.
Tout d'abord, la mise en œuvre du snap-to:
C'est une idée simple. Vous utilisez la bibliothèque JQuery UI. Vous ajoutez la fonction nécessaire pour la fonction «snap-to», en invoquant «snap-to» sur tous les éléments avec la classe de «kineticjsimage».
$( ".KineticJsImage" ).draggable({ snap: true });
Deuxièmement, pour toutes les images proportées par KineticJS, nous ajoutons la classe «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.
Comme vous l'avez mentionné dans votre première question, vous aviez trouvé l'opération Snap-to. La 2ème boîte de la démo de cette page utilise le paramètre générique (code que j'ai mentionné ci-dessus) SNAP: True. Lorsque vous invoquez cela, vous dites à la page de prendre tous les éléments draggables avec la classe de «kineticjsimage» à tout élément qui a également été déclaré draggle.
$(".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.
Tout ce que vous voulez réaliser est de faire avec jQuery UI et les extensions Draggable / Droppable fournies à l'intérieur.
Fermer et essayer de comprendre. Quand vous ne pouvez pas, revenez avec le code et nous vous montrerons où aller à partir de là. $ ("