I'm creating a script with draggable images which change src when double clicked as : Draggable image event in Kinect
Earlier question was answered and works great though if I add another object which will also change src when double-clicked then nothing works.
What could be the problem?
You have to have a set of different image and click event. jsfiddle: http://jsfiddle.net/bighostkim/8BcXk/
var imageObj2 = new Image();
imageObj2.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var yoda2 = new Kinetic.Image({
x: 300,
y: stage.getHeight() / 2 - 59,
width: 106,
height: 118,
image: imageObj2,
draggable: true
});
layer.add(yoda2);
var imgIndex2 = 0;
yoda2.on('click',function() {
imageObj2.src = images[ imgIndex2++ % 3 ];
layer.draw();
})
Related
I am trying to create a stage using konva.js. Basically, I need to add two (at least) or more images on the stage based on some layouts.
Example:
I have a layout that splits the stage area verically into two similar groups. Each group has one image.
Example code:
var stage = new Konva.Stage({
container: 'container',
width: width, // 295px
height: height, // 600px
});
var layer = new Konva.Layer({
imageSmoothingEnabled: true
});
// add a vertical line in order to show seperated groups
var line = new Konva.Line({
points: [stage.width() / 2, 0, stage.width() / 2, stage.height()],
stroke: '#9499a3',
strokeWidth: 2,
lineCap: 'round',
lineJoin: 'round',
});
layer.add(line)
// create group #1
var group1 = new Konva.Group({
x: 0,
y: 0,
width: stage.width() / 2,
height: stage.height()
});
var image1;
var imageObj = new Image();
imageObj.onload = function () {
image1 = new Konva.Image({
x: (stage.width() / 2 - imageObj.width) - line.strokeWidth() / 2,
//y: 0,
width: imageObj.width,
height: stage.height(),
image: imageObj,
draggable: true,
});
//layer.add(image1);
group1.add(image1);
image1.on('dragstart', function () {
console.log('dragstart')
});
image1.on('dragmove', function(e){
console.log('X : ' + this.attrs.x + ', Y : ' + this.attrs.y)
});
image1.on('dragend', function () {
console.log('X : ' + this.attrs.x + ', Y : ' + this.attrs.y)
});
};
imageObj.src = 'img/1.jpg';
// create group #2
var group2 = new Konva.Group({
x: stage.width() / 2 + line.strokeWidth() / 2,
y: 0,
width: stage.width() / 2,
height: stage.height()
});
var image2;
var imageObj = new Image();
imageObj.onload = function () {
image2 = new Konva.Image({
//x: stage.width() / 2 + line.strokeWidth() / 2,
//y: stage.height() / 2 - imageObj.height / 2,
width: imageObj.width,
height: stage.height(),
image: imageObj,
draggable: true,
});
//layer.add(image2);
group2.add(image2);
};
imageObj.src = 'img/2.jpg';
layer.add(group1, group2)
stage.add(layer);
What I want to do:
Define the draggable area of each image (or group) so to not be overflowed between each other.
Check if layer is visible so re-position image to hide the layer.
So the way to achieve this is to have a rect defining the frame in which the image will be constrained. Put this into a group and set the clip region of the group to match the position and size of the frame rect. Now add the image to the group. Only the part of the image in the group will be visible.
As a bonus, if you add a dragBoundFunc to the group you can ensure that an oversized image cannot be dragged beyond frame edges.
See snippet below (best run full-screen) and editable CodePen here.
This is, of course, only a single image frame where you have described that you will have say two in your use case. I suggest that you unravel the code then make a class, then you can use as many as required, etc.
// this data gives the position and size of the frame
let data = {
frameGroup: { x: 50, y: 100, width: 800, height: 300, strokeWidth: 10, stroke: 'cyan'},
fadeImage: {opacity: 0.3}
}
// add a stage
let stage = new Konva.Stage({container: 'container', width: 1000, height: 500 }),
layer = new Konva.Layer({}), // Add a layer and group to draw on
group = new Konva.Group({clip: data.frameGroup}),
rect = new Konva.Rect(data.frameGroup),
image = new Konva.Image({draggable: true}),
fadeImage = null,
imageObj = new Image();
stage.add(layer);
layer.add(group)
group.add(rect);
rect.listening(false); // stop the frame rect intercepting events
// Use the html image object to load the image and handle when laoded.
imageObj.onload=function () {
image.image(imageObj); // set the Konva image content to the html image content
// compute image position so that it is initially centered in the frame
let imagePos = getMiddlePos(data.frameGroup, data.frameGroup, {width: imageObj.width, height: imageObj.height});
// set the Konva image attributes as needed
image.setAttrs({
x: imagePos.x, y: imagePos.y, width: imageObj.width, height: imageObj.height,
// This function ensures the oversized image cannot be dragged beyond frame edges.
// Is is firect by the drag event.
dragBoundFunc: function(pos){
var imagePos = this.getClientRect(); // get the image dimensions.
let
maxPos = { // compute max x & y position allowed for image
x: data.frameGroup.x,
y: data.frameGroup.y
},
minPos = {
x: data.frameGroup.x + data.frameGroup.width - imagePos.width,
y: data.frameGroup.y + data.frameGroup.height - imagePos.height
},
newX = (pos.x >= maxPos.x) ? maxPos.x : pos.x, // ensure left edge not within frame
newY = (pos.y >= maxPos.y) ? maxPos.y : pos.y; // ensure top edge not within frame
newX = newX < minPos.x ? minPos.x : newX; // ensure right edge not within frame
newY = newY < minPos.y ? minPos.y : newY; // ensure top edge not within frame
fadeImage.setAttrs({x: newX, y: newY}); // apply what we computed
// dragBoundFunc must return a value with x & y. Either return same value passed in
// or modify the value.
return {
x: newX,
y: newY
};
}
})
group.add(image) // add the image to the frame group
image.moveToBottom(); // ensure the frame rect is above the image in the z-index.
// make a clone of the image to be used as the fade image.
fadeImage = image.clone({draggable: false, opacity: data.fadeImage.opacity});
layer.add(fadeImage);
// ensure fade image is one step below the frame group. ! - in this simple demo Konva will raise
// a warning because group.zIndex() = 0.
fadeImage.zIndex(group.zIndex() - 1);
}
imageObj.src = "https://assets.codepen.io/255591/hubble_space_image.jpg?x=1"
// simple function to get the x & y for the image to be centered in the frame
function getMiddlePos(framePos, frameSize, imageSize){
return{
x: framePos.x + (frameSize.width - imageSize.width)/2,
y: framePos.y + (frameSize.height - imageSize.height)/2,
}
}
// Toggle use of fade image to show overflowed part of image.
$('#useFadImage').on('change', function(e){
if (fadeImage){
fadeImage.visible(!fadeImage.visible());
}
})
body {
margin: 14px;
padding: 10px;
font: 12pt Verdana, Arial, sans-serif;
}
#container {
width: 1000px;
height: 500px;
border: 1px solid red;
}
<p><h2>Constrain an image to the bounds of a frame</h2></p>
<p>1. Set the frame group clip region.</p>
<p>2. Set dragBounds function on the image so that it cannot escape the group.</p>
<p>Drag the image and note that it cannot me dragged such that white space in the frame would be visible.</p>
<p>
<input type='checkbox' id='useFadImage' checked='' /><label for="useFadImage">Use fade image - shows area of image outside the frame </label>
</p>
<div id='container' ></div>
<p>Image from NASA Image of the day.</p>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
There is a blog entry on the subject here.
I use KineticJS add images to layers. I need to know which layer clicked.
This is jsfiddle: http://jsfiddle.net/yvp79ryf/1/
If i clicked first image just need get alert clicked is first layers otherwise second layer
HTML
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.4.3.min.js"></script>
<script defer="defer">
JavaScript
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var layer = new Kinetic.Layer();
var imageObj = new Image();
imageObj.onload = function() {
var yoda = new Kinetic.Image({
x: 140,
y: stage.getHeight() / 2 - 59,
image: imageObj,
width: 106,
height: 118
});
layer.add(yoda);
stage.add(layer);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';
var layer2 = new Kinetic.Layer();
var imageObj2 = new Image();
imageObj2.onload = function() {
var filteredYoda = new Kinetic.Image({
x: 280,
y: stage.getHeight() / 2 - 59,
image: imageObj2,
width: 106,
height: 118
});
layer2.add(filteredYoda);
stage.add(layer2);
};
imageObj2.src = 'http://demo-stable-ofbiz.apache.org/images/products/GZ-1000/small.png';
You need to set id to layers to identify them.
var layer = new Kinetic.Layer({id:1});
var layer2 = new Kinetic.Layer({id:2});
Add click event handler on stage
stage.on('click', function(e) {
if(e.targetNode.parent.attrs.id == 1){
alert('first layer');
}else{
alert('second layer');
}
});
You can check layer id through the descendants
e is MouseEvent object.
e.targetNode is Kinetic.Image
e.targetNode.parent is Kinetic.Layer
e.targetNode.parent.attrs.id is id of Kinetic.Layer
If you click on an image, you can use .getLayer() to get a reference to the layer that your clicked image is on.
stage.on('click', function(e) {
console.log('layer:',e.target.getLayer().id());
});
KineticJS does not listen for clicks on the empty part of a layer. Therefore, if you click on an empty part of the stage then you cannot tell which layer was clicked. But since since layer2 is above layer then if you click on the empty part of the stage then you're always clicking on the top layer (layer2).
Since I updated my KineticJS version to the latest (5.0.0) version filling a shape with a pattern image doesn't work anymore.
This is the code i am using to display the pattern:
var stage = new Kinetic.Stage({
container: document.getElementById("stage"),
height: 200,
width: 200
});
var layer = new Kinetic.Layer();
var shape = new Kinetic.Rect({
x: 10,
y: 10,
width: 150,
height: 150,
fill: "red",
fillPriority: "pattern"
});
var image = new Image();
image.onload = function () {
shape.setFillPatternImage(image);
stage.draw();
};
image.src = "http://placekitten.com/50/50";
layer.add(shape);
stage.add(layer);
stage.draw();
See an example here: http://jsfiddle.net/ss3hF/
And a working example with old version: http://jsfiddle.net/ss3hF/1/
Does anyone else experience this?
Is it a bug or did i miss something in the ChangeLog?
Thanks in advance, McFarlane
Solution:
shape.setFillPatternImage(image);
shape.fillPatternScaleX(1);
shape.fillPatternScaleY(1);
stage.draw();
Ok, so I am new to KineticJS and while playing with it, I can't seem to combine an image background with a rectangle layered above that image. Now, if I remove the background image, then the rectangle shows. Even if I put the rectangle code above the image, still doesn't show on top. Sure it is something simple I am missing but I can't seem to figure out what it is and can't find a similar issue here on stackoverflow. Thanks for the help.
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<style>
</style>
</head>
<body>
<div id="container"></div>
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});
//Layer for our background
var background_layer = new Kinetic.Layer();
//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});
background_layer.add(backgroundImage);
stage.add(background_layer);
};
canvasBackgroundImage.src = 'images/quiz_back.jpg'; //Location of our background
//Question container
var question_container_layer = new Kinetic.Layer();
var question_container = new Kinetic.Rect({
x: 100,
y: 100,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);
stage.add(question_container_layer);
</script>
</body>
Your problem is that you're adding background_layer to the stage inside the canvasBackgroundImage.onload function. Javascript will run through the entire script, and add the question_container_layer to the stage first, AND THEN when your image loads, the background_layer will be added to the stage. As a result, the background image always appears on top of your rectangle layer.
To fix this, add the layers to your stage outside of your onload function:
<script defer="defer">
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 450
});
//Layer for our background
var background_layer = new Kinetic.Layer();
var question_container_layer = new Kinetic.Layer();
stage.add(background_layer);
stage.add(question_container_layer);
//Canvas background image
var canvasBackgroundImage = new Image();
canvasBackgroundImage.onload = function() {
var backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: canvasBackgroundImage,
width: 600,
height: 450
});
background_layer.add(backgroundImage);
background_layer.draw();
};
canvasBackgroundImage.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Location of our background
//Question container
var question_container = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 200,
fill: 'green',
stroke: 'black',
strokeWidth: 2
});
question_container_layer.add(question_container);
question_container_layer.draw();
</script>
To avoid this in the future, unless you have dynamic layers to be added to the stage, I would recommend adding all known layers to the stage before doing anything else. That way you can control the ordering of your layers.
Or alternatively, you can use the zIndex property to order your layers. See here: Kinetic.Container#setZIndex
Hi I am looking to make a floor plan editor (something like MsPaint) using JavaScript. I have shortlisted EaselJS or KinetiJS as my preferred libraries.
I would like to know how to create a dynamic rectangular box/line with these libraries. I intend to draw a rectangle by clicking the mouse and dragging it (while the mouse button remains pressed). Thus the size of the rectangle will depend on how far the mouse is dragged.
Any help will be appreciated. If anyone feels that any other library like fabrisJs or paperJs will be better alternative then I am open to solutions in these libraries as well.
Ok... by trial and error and lots of googling and reusing net code I got the answer for KineticJs.
Heres the complete solution:
http://jsfiddle.net/sandeepy02/8kGVD/
<html>
<head>
<script>
window.onload = function() {
layer = new Kinetic.Layer();
stage = new Kinetic.Stage({
container: "container",
width: 320,
height: 320
});
background = new Kinetic.Rect({
x: 0,
y: 0,
width: stage.getWidth(),
height: stage.getHeight(),
fill: "white"
});
layer.add(background);
stage.add(layer);
moving = false;
stage.on("mousedown", function(){
if (moving){
moving = false;layer.draw();
} else {
var mousePos = stage.getMousePosition();
rect= new Kinetic.Rect({
x: 22,
y: 7,
width: 0,
height: 0,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
layer.add(rect);
//start point and end point are the same
rect.setX(mousePos.x);
rect.setY(mousePos.y);
rect.setWidth(0);
rect.setHeight(0);
moving = true;
layer.drawScene();
}
});
stage.on("mousemove", function(){
if (moving) {
var mousePos = stage.getMousePosition();
var x = mousePos.x;
var y = mousePos.y;
rect.setWidth(mousePos.x-rect.getX());
rect.setHeight(mousePos.y-rect.getY());
moving = true;
layer.drawScene();
}
});
stage.on("mouseup", function(){
moving = false;
});
};
</script>
</head>
<body>
<div id="container" ></div>
</body>
</html>