Kineticjs Groups of shapes can be dragged out of stage and mousedown outside the stage loses the shapes.
Yes...
By default shapes can be dragged out of the group and even dragged off stage.
You can limit the shapes drag to a specified area using dragBoundFunc.
Here's a Fiddle: http://jsfiddle.net/m1erickson/bP92U/
var rect = new Kinetic.Rect({
x: 20,
y: 20,
width:50,
height:30,
fill: 'blue',
draggable: true,
dragBoundFunc: function(pos) {
var w=this.getWidth();
var h=this.getHeight();
if(pos.x<0){pos.x=0;}
if(pos.x+w>sw){pos.x=sw-w;}
if(pos.y<0){pos.y=0;}
if(pos.y+h>sh){pos.y=sh-h;}
return {
x: pos.x,
y: pos.y
}
}
});
Related
I am developing a Graph Editor with Nodes and Branches. With Pan/Zoom. I am starting with the (1) Pan/Zoom (done), (2) Add Nodes (done), (3) Select Nodes (done), (4) Move Nodes (disable the Pan). I am stuck here. I made the stage draggable for the Pan. When I want to move (drag) the nodes, I put draggable of the stage to false. But I don't see how to drag the nodes.
The use of the Graph Editor is (+) Nodes to create the nodes.
Thanks for any help.
Here is a jsbin
https://jsbin.com/suqisak/4/edit?html,js,output
function evtFct_OnMouseDragStart(event) {
var realMousePos = getRelativePointerPosition(group);
console.log('DragStart');
if (Nodes_list.length > 0) {
var SelectedNode = getSelected_Node(realMousePos);
if (SelectedNode !== null) {
SelectedNode.circle.draggable(true);
}
}
}
I dont see how to make the nodes (circles) draggable.
the event DragStart Doesn't fire !!!
Then I created a group with the circle + label, and made the group draggable.
draw() {
this.View = new Konva.Group({draggable: true});
this.circle = new Konva.Circle({
x: this.x,
y: this.y,
radius: nodeSize,
fill: nodeColor,
draggable: true,
id: this.node_id
});
this.label = new Konva.Text({
x: this.x - 20,
y: this.y - 10,
text: this.node_id,
width: 40,
height: 20,
fontSize: 8,
fontFamily: 'sans-serif',
fill: 'blue',
verticalAlign: 'middle',
align: 'center'
});
this.View.add(this.circle);
this.View.add(this.label);
group.add(this.View);
}
And I could drag the nodes, BUT !!! I lost the node x, and y.
When I click on the node (near the node center), I knew near which node, I clicked. But Now !!! I lost the the x, and y of the new position !!!
Remark : In fact, I select the node by my own, I get the mouse click position. I loop through the nodes_list, to check if the position of the click and the circle center, have a distance less than the circle radius.
Finally, the question became, how to get the Node position coordinates (x,y) after the drag ?
As you are making a group draggable, you just need to set position to it. Then for a circle and a text, you need to set position relative to the group:
this.View = new Konva.Group({draggable: true, x: this.x, y: this.y });//added
this.circle = new Konva.Circle({
radius: nodeSize,
fill: nodeColor,
draggable: true,
id: this.node_id
});
this.label = new Konva.Text({
x: - 20,
y: - 10,
text: this.node_id,
width: 40,
height: 20,
fontSize: 8,
fontFamily: 'sans-serif',
fill: 'blue',
verticalAlign: 'middle',
align: 'center'
});
Then you just read the position from the group.
https://jsbin.com/yevozeyeza/1/edit?html,js,output
I am able to rotate a rectangle (shape) using KineticJS library I would like now to rotate an image, How I can do that?
var stage = new Kinetic.Stage({
container: 'container',
width: 530,
height: 530
});
var layer = new Kinetic.Layer();
var bg = new Kinetic.Image({
x: 0,
y: 0,
width: 530,
height: 530,
fill: '#D7D7D7',
});
/****************** image **********************/
//sticker.setRotationDeg(90);
var imageObj = new Image();
function sticker(v) {
if(!imageObj.src){
var sticker = new Kinetic.Image({
x: 280,
y: 300,
image: imageObj,
draggable: true
});
layer.add(sticker);
}
imageObj.src = 'http://cdn.sstatic.net/photo/img/apple-touch-icon.png';
layer.draw();
}
/****************** image **********************/
layer.add(bg);
stage.add(layer);
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.2.min.js"></script>
<div id="container"></div>
<input type="button" value="ShowSticker" onclick="sticker();"> click show sticker
<input type="button" value="rotate"> up + 5
I want to Click The rotation
step 1 click button show sticker
step 2 click button rotate
Each time you press + 5
or see web : http://jsfiddle.net/m1erickson/Z6Yg8/
As I have understood from you that you want to rotate an image, here is the following:
First I suggest you to use KonvaJS library which is forked from KineticJS but is supported by a community, as now KeniticJS is no longer supported.
In order to rotate in image you need to load it into the layer:
imageObj.onload = function() {
var yoda = new Konva.Image({
x: 50,
y: 50,
image: imageObj,
width: 106,
height: 118,
name: "yoda"
});
And then rotate it:
$("#rotate").click(function () {
layer.find('Image').rotate(500 * Math.PI / 180);
layer.draw();
});
Here is a full example
I am trying to make KineticJs html 5 custom shape.
But it is not working in Google chrome. Not draggable in Firefox and also shape are not same in size.
Can anybody tell why?
live code http://jsfiddle.net/prantor19/wGE2a/8/
var stage = new Kinetic.Stage({
container: 'canvas-container',
width: 500,
height: 500,
});
var layer = new Kinetic.Layer();
drawWindow = function(canvas) {
var context = canvas.getContext();
context.beginPath();
context.moveTo(this.attrs.x,this.attrs.y);
context.lineTo(this.attrs.width,this.attrs.y);
context.lineTo(this.attrs.width,this.attrs.height);
context.lineTo(this.attrs.x,this.attrs.height);
context.closePath();
context.clip();
context.drawImage(img,this.attrs.img_x,this.attrs.img_y);
}
img = document.createElement('img');
img.src= "http://upload.wikimedia.org/wikipedia/commons/thumb/1/14/Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG/1024px-Nature_reserve_Kladrubska_hora_in_summer_2011_(17).JPG";
var window1 = new Kinetic.Shape({
drawFunc: drawWindow,
x: 0,
y: 0,
width: 100,
height: 100,
img:img,
img_x:0,
img_y:0,
draggable: true
});
var window2 = new Kinetic.Shape({
drawFunc: drawWindow,
x: 10,
y: 60,
width: 100,
height: 100,
img:img,
img_x:-250,
img_y:0,
draggable: true
});
pointercursor = function() {
document.body.style.cursor = 'pointer';
}
defaultCursor = function() {
document.body.style.cursor = 'default';
}
window1.on('mouseover',pointercursor );
window1.on('mouseout', defaultCursor);
window2.on('mouseover',pointercursor );
window2.on('mouseout', defaultCursor);
layer.add(window1);
layer.add(window2);
stage.add(layer);
Your script has errors in it
Unable to get image data from canvas because the canvas has been tainted by cross-origin data. kinetic-v4.3.2-beta.js:4365
Uncaught Error: SecurityError: DOM Exception 18
Chrome refuse to work with cross domain images on cavas.
For dragging, you need to add this set stroke for the shape
stroke: 'black',
and at the end of drawFunc
canvas.fillStroke(this);
Here is the my working version from yours
http://jsfiddle.net/W7SGT/
You should be using the canvas renderer when drawing a custom shape in KienticJS, or else it has no way to handle the events on the shape. Here's a tutorial on custom shapes:
http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/
you might also take a look at the Kinetic.Image shape to see how it handles images specifically:
https://github.com/ericdrowell/KineticJS/blob/master/src/shapes/Image.js
I have a grid and I'm looking to basically add a tooltip Image for each rectangle in the grid. Basically, first I need to be able to add an image to the canvas on the rectangle mouse over event. Eventually each rectangle would have it's own image so I need to keep track of the rectangles...do I add them to an array?
Here is my fiddle for what I've got so far:
http://jsfiddle.net/marseilles84/7ZzTh/1/
Here is a sample image source to use:
'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
<div id="container"></div>
var stage = new Kinetic.Stage({
container: 'container',
width: 1000,
height: 500
});
var layer = new Kinetic.Layer();
for (var i=0; i<7; i++)
{
for(c=0; c<18; c++)
{
var colorPentagon = new Kinetic.Rect({
x: (45*c),
y: 45*i,
width:40,
height:40,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
draggable: true
});
colorPentagon.on('mouseover touchstart', function() {
//code here
});
layer.add(colorPentagon);
}
}
stage.add(layer);
http://jsfiddle.net/7ZzTh/2/
This is probably more of what you're looking for.
colorPentagon.on('mouseover touchstart', function() {
var userPos = stage.getUserPosition();
yoda.setPosition(userPos.x,userPos.y);
layer.add(yoda);
layer.draw();
});
colorPentagon.on('mouseout touchstart', function() {
yoda.remove();
layer.draw();
});
At the beginning you want:
var imageObj = new Image();
var yoda = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 106,
height: 118
});
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
I have been playing about with kineticjs and the canvas as of the last couple of days. I have a drag and drop canvas that loads a resizable image. the anchors on the resizable image are circles:
var anchor;
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: "#666",
fill: "#ddd",
strokeWidth: 2,
radius: 8,
name: name,
draggable: true
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.setDraggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.setDraggable(true);
layer.draw();
});
// add hover styling
anchor.on("mouseover", function() {
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setStrokeWidth(4);
layer.draw();
});
anchor.on("mouseout", function() {
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
I would like to turn them into arrows, or something similar to show users that infact the image is resizeable. Does anyone have a method of doing this or a tutorial that may show me how to either draw arrows or replace the anchors with an image?
Thanks for any help...
I think you'll need to change the new Kinetic.Cirle and it's properties to something like this:
var anchor = new Kinetic.RegularPolygon({
x: x,
y: y,
sides: 3,
rotation: -190,
radius: 8,
stroke: "black",
strokeWidth: 2,
name: name,
draggable: true
});
Although this is only the beginning, due to having a different rotation on each anchor, you will also have to add more variables to the group of anchors as to have each triangle face the correct direction.
I have only briefly tested this, but I hope it helps as a starting point.
Remember to double check the Docs.
EDIT: Also see here.