I am trying to design an editor which can be used to draw shapes using blocks, using kineticjs framework. So far everything was good. I am able to add rectangle, to change its size, and to rotate it. But what i said only works on the last created object. I can t select one of them to modify. Here html of the code:
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
</style>
</head>
<body>
<table width="800" border="0">
<tr>
<td colspan="2" style="background-color:#eeeeee;">
</td>
</tr>
<tr>
<td style="background-color:#eeeeee;height:200px;width:400px;">
<button id="rect">Rectangle</button><br>
<button id="small">Small</button><br>
<button id="big">Big</button><br>
<button id="rotate">RotateRight</button><br>
<button id="rotate2">RotateLeft</button><br>
<button id="delete">Delete</button><br>
</td>
<td>
<div id="container"></div>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
<script type="text/javascript" src="example_kinetic.js"></script>
</td>
</tr>
<tr>
<td colspan="2" style="background-color:#eeeeee;text-align:center;">
Copyright © ceng314animation.wordpress.com/</td>
</tr>
</table>
</body>
</html>
And this is the js part:
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
boardBlankArray = [];
var rect, myRect;
var i = 1;
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
rect.setListening(true);
boardBlankArray[i] = rect;
// add the shape to the layer
layer.add(boardBlankArray[i]);
stage.add(layer);
boardBlankArray[i].on("click",function(){
alert(this.attrs.id);
//myRect = stage.getChildren()[i];
});
}, false);
document.getElementById('big').addEventListener('click', function(){
rect.setWidth(rect.getWidth()+10);
rect.setHeight(rect.getHeight()+10);
rect.setListening(true);
stage.add(layer);
}, false);
document.getElementById('small').addEventListener('click', function() {
rect.setListening(true);
rect.setWidth(rect.getWidth()-10);
rect.setHeight(rect.getHeight()-10);
stage.add(layer);
}, false);
document.getElementById('rotate').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('rotate2').addEventListener('click', function() {
rect.setListening(true);
rect.rotate(-Math.PI/4);
stage.add(layer);
}, false);
document.getElementById('delete').addEventListener('click', function() {
layer.remove(rect);
stage.add(layer);
}, false);
It looks like #jing3142's answer worked for #user1422167, but I wanted to post this answer here as the other answer uses an unconventional approach to selecting a node in KineticJS.
The KineticJS way of selecting a node would be to use:
event.targetNode
Source: http://www.html5canvastutorials.com/kineticjs/html5-canvas-get-event-shape-with-kineticjs/
layer.on('click', function(evt) {
// get the shape that was clicked on
var shape = evt.targetNode;
alert('you clicked on \"' + shape.getName() + '\"');
});
Using var shape = evt.targetNode;, you can call all of your KineticJS methods on the KineticJS Node. In this example the tutorial calls the getName method: shape.getName().
Also, see more about KineticJS events here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/
UPDATE
KineticJS 5.0.1 and before
var shape = evt.targetNode;
KineticJS 5.1.0+
var shape = evt.target;
When you click on a rectangle you need to make this the active rectangle. Use myrect as variable for currently active rectangle
Make the following changes to your code, identified with //<<<<<<<<<<<<<<<<<<<<<
Note boardBlankArray is not necessary
document.getElementById('rect').addEventListener('click', function() {
rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: 'green',
stroke: 'black',
strokeWidth: 4,
offset: [50,25],
draggable: true,
id:"rect"+i
});
i=i+1;
myrect=rect //<<<<<<<<<<<<<<sets recently created rectangle as active
rect.setListening(true);
// add the shape to the layer
layer.add(rect);
stage.add(layer);
rect.on("click",function(){ //<<<<<<<<<<<
myRect = this; //<<<<<<<<<<<<<<<<<<<<<< sets clicked on rectangle as active
});
}, false);
document.getElementById('big').addEventListener('click', function(){
myrect.setWidth(myrect.getWidth()+10); //<<<<<<<<<uses currently active rectangle
myrect.setHeight(myrect.getHeight()+10); //<<<<<<<uses currently active rectangle
myrect.setListening(true);
stage.add(layer);
}, false);
You need to change rect to myrect in all following function calls
Related
i´m newbie konvas libray user, I try made a simple game, i need detect when dragout the box from the shape and show alert "louser", the problem is the shapes irregular because the functio for detection event work good a rectangle shapes, but in inrregular shapes dont respect the border form, i hope can be helpme an detect when the box dragout the irregualar shape and respect the border, thankeyou, the code is below
Konva Drag and Drop Multiple Shapes Demoview raw
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/konva#7.2.2/konva.min.js"></script>
<meta charset="utf-8" />
<title>Konva Drag and Drop Collision Detection Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
});
var layer = new Konva.Layer();
stage.add(layer);
var RectA = new Konva.Rect({
x: 380,
y:100,
width: 30,
height: 30,
fill: 'grey',
name: 'fillShape',
draggable: true,
stroke: 'red',
hitStrokeWidth: 30,
});
var RectB = new Konva.Line({
x: 350,
y: 80,
points:[0, 0, 50, 0, 50, 100, 0, 100],
fill: 'grey',
closed: true,
name: 'fillShape',
draggable: false,
stroke: 'red',
hitStrokeWidth: 10,
tension: 1,
});
layer.add(RectB);
layer.add(RectA);
layer.draw();
RectA.on('dragmove', function (e) {
var target = e.target;
var targetRect = e.target.getClientRect();
layer.children.each(function (RectB) {
// do not check intersection with itself
if (RectB === target) {
return;
}
if (haveIntersection(RectB.getClientRect(), targetRect)) {
// RectB.findOne('.fillShape').fill('red');
} else {
alert("louse");
// RectB.findOne('.fillShape').fill('grey');
}
// do not need to call layer.draw() here
// because it will be called by dragmove action
});
});
function haveIntersection(r1, r2) {
return !(
r2.x > r1.x + r1.width ||
r2.x + r2.width < r1.x ||
r2.y > r1.y + r1.height ||
r2.y + r2.height < r1.y
);
}
layer.draw();
</script>
</body>
</html>
My recommendation would be to use Hitboxes.
The basic idea is to mark off your complex structure with rectangles and then look at each rectangle to see whether there was a colition. You can check the individual rectangles with your function below.
Hitboxes aren't perfect with most structures, but if you use enough it's a very accurate estimate.
Also, "professional" games do the same.
I'd like to drag a Konva layer even if empty. I see that I can drag the layer only where objects are present (the code shows that you can drag where the rectangle is but nowhere else).
How can I drag the layer dragging empty parts?
Moreover, I see that also the mouseenter and mousleave aren't respected if you are out of the objects of the layer.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/konva#2.4.2/konva.min.js"></script>
<div id="container"></div>
<script>
function demo() {
var stage = new Konva.Stage({
container: 'container',
width: 100,
height: 100
});
var layer = new Konva.Layer({draggable: true});
stage.add(layer);
layer.on("dragmove", function() {
console.log(this.x(), this.y())
});
layer.on("mouseenter", function() {
stage.container().style.cursor = 'pointer';
});
layer.on("mouseleave", function() {
stage.container().style.cursor = 'default';
});
var rect = new Konva.Rect({
width: 50,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 5
});
layer.add(rect);
stage.draw();
}
demo();
</script>
</body>
</html>
Konva does not detect events on empty space of layers. And it is unclear how can it do it if you have several layers on the stage.
If you still need to listen on empty layers and make a layer draggable at any space you can:
Make stage draggable instead and listen events on it (click will work on empty space too).
Add a transparent rectangle as a background, so it will be used to listen to events:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body>
<script src="js/modulePattern.js"></script>
<script src="https://unpkg.com/konva#2.4.2/konva.min.js"></script>
<div id="container"></div>
<script>
function demo() {
var stage = new Konva.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Konva.Layer({draggable: true});
stage.add(layer);
layer.on("mouseenter", function() {
stage.container().style.cursor = 'pointer';
});
layer.on("mouseleave", function() {
stage.container().style.cursor = 'default';
});
var rect = new Konva.Rect({
width: 50,
height: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 5
});
var back = new Konva.Rect({
fill: 'red',
width: stage.width(),
height: stage.height()
})
layer.add(back);
// move rectangle so it always stay on the screen, no matter where layer it
layer.on('dragend', function() {
back.setAbsolutePosition({x: 0, y: 0});
layer.draw();
});
layer.add(rect);
stage.draw();
}
demo();
</script>
</body>
</html>
I need to create a kind of container to manage dynamic actions with KineticJS.
I have a simple object from which we will be able to add a circle by using a function.
Here's my code:
function Stage() {
var self = this;
self.stage = new Kinetic.Stage({
container: "museumMapContainer",
width: 500,
height: 500
});
self.layer = new Kinetic.Layer();
self.addCircle = function (x,y) {
var circle = new Kinetic.Circle({
x: x,
y: y,
radius: 40,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
circle.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
circle.on('mouseout', function() {
document.body.style.cursor = 'default';
});
self.layer.add(circle);
}
self.stage.add(self.layer);
}
stage = new Stage();
stage.addCircle(250,250);
Normally, if I don't put the code inside a function, I can easily create a circle without any problems. However, this code doesn't work and I really don't know why.
Here's a Plunker: http://plnkr.co/edit/E1fbCFMeZwGNAKhsArhm?p=preview
There are no errors in the console and nothing is showing and I don't know why...
Make sure you do layer.draw after creating your new circles:
<!DOCTYPE html>
<html>
<head>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.1.min.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="museumMapContainer" style="width:500px;height:500px;border:1px solid black;"></div>
<script defer="defer">
function Stage() {
var self = this;
self.stage = new Kinetic.Stage({
container: "museumMapContainer",
width: 500,
height: 500
});
self.layer = new Kinetic.Layer();
self.stage.add(self.layer);
self.addCircle = function (x,y) {
var circle = new Kinetic.Circle({
x: x,
y: y,
radius: 40,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
circle.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
circle.on('mouseout', function() {
document.body.style.cursor = 'default';
});
self.layer.add(circle);
self.layer.draw();
}
}
stage = new Stage();
stage.addCircle(250,250);
</script>
</body>
</html>
I've got the following code:
var text = new Kinetic.Text({
text: carNames,
fontFamily: 'Calibri',
fontSize: 17,
fill: 'black',
align: 'center'
});
text.toImage({
width: text.getWidth(),
height: text.getHeight(),
callback: function (img) {
var cachedText = new Kinetic.Image({
image: img,
x: 180,
y: 0
});
wedge.add(cachedText);
layer.draw();
}
});
Which produces wedges and text that look like this:
But I need the text to be centered inside the wedge, like this:
Does anyone know of a way to achieve this? I've tried several things but I just can't get the text to align as in the second image.
Thanks in advance for your trouble.
One way to do it is using the text's offset in combination with the text's rotationDeg:
Demo: http://jsfiddle.net/m1erickson/mqsY3/
Here's code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Prototype</title>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.2.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
var cx=175;
var cy=175;
var wedgeRadius=120;
var accumAngle=0;
var center = new Kinetic.Circle({
x:cx,
y:cy,
radius:5,
fill: 'red'
});
layer.add(center);
for(var i=0;i<12;i++){
newTextWedge(30,"Element # "+i);
}
function newTextWedge(angle,text){
var wedge = new Kinetic.Wedge({
x: cx,
y: cy,
radius: wedgeRadius,
angleDeg: angle,
stroke: 'gray',
strokeWidth: 1,
rotationDeg:-accumAngle+angle/2
});
layer.add(wedge);
if(accumAngle>90 && accumAngle<270){
var offset=[wedgeRadius-10,7];
var textAngle=accumAngle-180;
}else{
var offset=[-50,7];
var textAngle=accumAngle;
}
var text = new Kinetic.Text({
x:cx,
y:cy,
text:text,
fill: 'red',
offset:offset,
rotationDeg:textAngle
});
layer.add(text);
layer.draw();
accumAngle+=angle;
}
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
I am new with HTML5.
I have to implement such a functionality that I want images to be dropped within a canvas from outside, then there are visible boundaries within canvas and the images can be moved from one boundary to another. It is the same as in the following link,
http://custom.case-mate.com/diy?bypassLandingPage=true
As, in the site, user selects the pattern and drags images into that. Then he can drag the images between the boundaries. please give some solution for implementing such a functionality.
Here is what I have tried,
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {position:relative;
left:150%;
border: 10px solid #9C9898;
background-color: grey;
}
</style>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.10.0.js"></script>
<script>
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 300,
height: 400,
});
var layer = new Kinetic.Layer();
var redLine = new Kinetic.Line({
points: [150, 0, 150, 400],
stroke: "white",
strokeWidth: 2,
});
var blueLine = new Kinetic.Line({
points: [150, 0, 150, 120, 300, 120],
stroke: "white",
strokeWidth: 2,
});
var thirdLine = new Kinetic.Line({
points: [300, 120, 150, 120, 150, 400],
stroke: "white",
strokeWidth: 2,
});
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({
x: stage.getWidth() / 2 - 50,
y: stage.getHeight() / 2 - 60,
image: imageObj,
width: 100,
height: 120,
});
image.draggable(true);
layer.add(image);
// add the layer to the stage
stage.add(layer);
};
imageObj.src = "images/212.png";
layer.add(redLine);
layer.add(blueLine);
layer.add(thirdLine);
stage.add(layer);
};
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>
Here's a nice tutorial on HTML5 native drag'n'drop:
http://www.html5rocks.com/en/tutorials/dnd/basics/
Basically you can declare an item as draggable in HTML5 with the draggable attribute
<div class="draggable" draggable="true">A</div>
<div class="draggable" draggable="true">B</div>
...and then use Javascript to handle some events like:
var items = document.querySelectorAll('.draggable');
[].forEach.call(items, function(item) {
item.addEventListener('dragstart', function(){ /*handle drag start*/ }, false);
item.addEventListener('dragenter', function(){ /*handle drag enter*/ }, false)
item.addEventListener('dragover', function(){ /*handle drag over*/ }, false);
item.addEventListener('dragleave', function(){ /*handle drag leave*/ }, false);
item.addEventListener('drop', function(){ /*handle drop*/ }, false);
item.addEventListener('dragend', function(){ /*handle drag end*/ }, false);
});