How can I make a mouseover function in JavaScript less resource-intensive? I used a way where one function activates another (mouse over) and this function activates the first (mouseout). I used Kinetic.js, but I would also like to have a solution with another library.
I'd like to use it later with other options for mouseover functions.
My code:
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"
function changeCircle (circleLayer, nx, ny, nradius, nfill, nstroke, nstrokeWidth) {
var stage = new Kinetic.Stage("container", 578, 200);
var context = circleLayer.getContext();
circleLayer.clear();
var ncircle = new Kinetic.Circle({
x: nx ,
y: ny ,
radius: nradius ,
fill: nfill ,
stroke: nstroke ,
strokeWidth: nstrokeWidth
});
circleLayer.add(ncircle);
stage.add(circleLayer);
ncircle.on("mouseout", function(){
drawCircle (nx, ny, nradius, scolor, nstroke, nstrokeWidth);
});
}
function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage("container", 578, 200);
var circleLayer = new Kinetic.Layer();
circleLayer.clear();
//circle
var scircle = new Kinetic.Circle({
x: sx ,
y: sy ,
radius: sradius ,
fill: sfill ,
stroke: sstroke ,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover", function() {
changeCircle(circleLayer, sx, sy, sradius, "red", sstroke, sstrokeWidth);
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function(){
drawCircle (200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
Before mouseover and mouseout, clear div(container) Tag.
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"
function changeCircle(circleLayer, nx, ny, nradius, nfill, nstroke, nstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var context = circleLayer.getContext();
circleLayer.clear();
var ncircle = new Kinetic.Circle({
x: nx,
y: ny,
radius: nradius,
fill: nfill,
stroke: nstroke,
strokeWidth: nstrokeWidth
});
circleLayer.add(ncircle);
stage.add(circleLayer);
ncircle.on("mouseout", function() {
document.getElementById("container").innerHTML = "";
drawCircle(nx, ny, nradius, scolor, nstroke, nstrokeWidth);
});
}
function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: sfill,
stroke: sstroke,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover", function() {
document.getElementById("container").innerHTML = "";
changeCircle(circleLayer, sx, sy, sradius, "red", sstroke, sstrokeWidth);
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
OR use mouseout event in same function
<head>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>
<script>
var scolor = "green"
var ncolor = "red"
function drawCircle(sx, sy, sradius, sfill, sstroke, sstrokeWidth) {
var stage = new Kinetic.Stage({ container: "container", width: 578, height: 200 });
var circleLayer = new Kinetic.Layer();
//circle
var scircle = new Kinetic.Circle({
x: sx,
y: sy,
radius: sradius,
fill: sfill,
stroke: sstroke,
strokeWidth: sstrokeWidth
});
scircle.on("mouseover", function() {
scircle.attrs.fill = "red";
circleLayer.draw();
});
scircle.on("mouseout", function() {
scircle.attrs.fill = "green";
circleLayer.draw();
});
circleLayer.add(scircle);
stage.add(circleLayer);
}
window.onload = function() {
drawCircle(200, 100, 50, "green", "black", 3);
};
</script>
</head>
<body>
<div id="container">
</div>
</body>
Related
i want to draw a line beetween a circle everytime i add a circle on konva js. and the circle is dragable. so i want the line follow the circle when i drag it. How to do it? or maybe i'm doing it wrong. Here my code https://jsfiddle.net/nutsi/2L7v6hy3/13/
var stage = new Konva.Stage({
height: window.innerHeight * 0.85,
width: window.innerWidth * 0.85,
container: "konva"
});
var layer = new Konva.Layer();
stage.on("click", function(){
var points = [];
var pos = this.getRelativePointerPosition();
var dot = new Konva.Circle({
x: pos.x,
y: pos.y,
fill: 'red',
radius: 5,
id: "seljal",
draggable: true
});
layer.add(dot)
var a = layer.find("#seljal")
for(let x = 0; x < a.length; x++){
points.push(a[x].attrs.x, a[x].attrs.y)
}
var line = new Konva.Line({
points: points,
stroke: "red",
strokeWidth: 2,
dash: [5, 5],
opacity: 1,
closed: !0,
id: "line"
})
var b = layer.find("#line")[0]
if(b) b.destroy();
layer.add(line);
})
stage.add(layer);
stage.draw();
I am trying to edit another example that was posted on here but something doesn't seem right. I have a shape and then a couple of shapes that are grouped together with an arrow that is pointing in between the two shapes. As one of the shapes is dragged the arrow position should move as well.
The Problem
The problem is that the shape seems to be on a different coordinate system where its 0,0 point is in the upper left corner, whereas the groups coordinate system where its 0,0 point is right in the middle of the screen. What am I doing wrong?
Code
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Circle 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();
var group = new Konva.Group({
x:120,
y:120,
draggable: true,
});
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 40,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
});
var circleA = new Konva.Circle({
x: stage.getWidth() / 5,
y: stage.getHeight() / 5,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var arrow = new Konva.Arrow({
points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()],
pointerLength: 10,
pointerWidth: 10,
fill: 'black',
stroke: 'black',
strokeWidth: 4
});
var star = new Konva.Star({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: '#89b717',
opacity: 0.8,
scale: {
x : 1.4,
y : 1.4
},
rotation: Math.random() * 180,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: {
x : 5,
y : 5
},
shadowOpacity: 0.6,
});
//layer.add(star);
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
function adjustPoint(e){
var p=[circle.getX(), circle.getY(), circleA.getX(), circleA.getY()];
arrow.setPoints(p);
layer.draw();
console.log(group.getX(),group.getY());
console.log(circleA.getX(),circleA.getY());
}
//circle.on('dragmove', adjustPoint);
group.on('dragmove', adjustPoint);
circleA.on('dragmove', adjustPoint);
group.add(star,circle);
//group.add(circle);
layer.add(group);
layer.add(circleA);
// add the shape to the layer
//layer.add(circle);
layer.add(arrow);
//layer.add(star);
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
When you put a shape on a group, it's getX() and getY() functions return values relative to the origin point of the group. Your error was to assume that the X, Y position of the circle in the group would change as the group is dragged.
In the working code below, based on your posted code, I changed only the first line of the AdjustPoint() function so that the X, Y position of the circle has added to it the X, Y position of the group.
This fixes your issue.
Tip: as you start using groups be aware that their extent on the page is that of the minimum rectangle needed to contain the group shapes. If you want to specifically control the size and location of a group, add to it a Rect() shape of specific width and height to give a known size to the group.
I also added a call to that function at the end of the code so that the arrow joins when the code initially runs.
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
var group = new Konva.Group({
x:120,
y:10,
draggable: true,
});
var circle = new Konva.Circle({
x: stage.getWidth() / 2,
y: 60,
radius: 40,
fill: 'green',
stroke: 'black',
strokeWidth: 2,
});
var circleA = new Konva.Circle({
x: stage.getWidth() / 5,
y: stage.getHeight() / 5,
radius: 30,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var arrow = new Konva.Arrow({
points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()],
pointerLength: 10,
pointerWidth: 10,
fill: 'black',
stroke: 'black',
strokeWidth: 4
});
var star = new Konva.Star({
x: stage.getWidth() / 2,
y: 60,
numPoints: 5,
innerRadius: 30,
outerRadius: 50,
fill: '#89b717',
opacity: 0.8,
scale: {
x : 1.4,
y : 1.4
},
rotation: Math.random() * 180,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: {
x : 5,
y : 5
},
shadowOpacity: 0.6,
});
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
function adjustPoint(e){
// changes here
var p=[ group.getX() + circle.getX(), group.getY() + circle.getY(), circleA.getX(), circleA.getY()];
// changes here
arrow.setPoints(p);
layer.draw();
stage.draw();
// console.log('group = ' + group.getX() + ', ' + group.getY());
// console.log('red circle = ' + circleA.getX() + ', ' + circleA.getY());
}
//circle.on('dragmove', adjustPoint);
group.on('dragmove', adjustPoint);
circleA.on('dragmove', adjustPoint);
group.add(star,circle);
//group.add(circle);
layer.add(group);
layer.add(circleA);
// add the shape to the layer
//layer.add(circle);
layer.add(arrow);
//layer.add(star);
// add the layer to the stage
stage.add(layer);
// changes here
adjustPoint();
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
<script src="https://cdn.rawgit.com/konvajs/konva/0.13.0/konva.min.js"></script>
<body>
<div id="container"></div>
</body>
how would I make these three circles not change colour at the same time as each other? E.g. one colour change wouldn't overlap another? So yellow/purple goes first, then orange and black and finally green and black. I just don't want the change to overlap each other, I would like it go one by one.
var circle = new Konva.Circle({
x: 300,
y: 120,
sides: 3,
radius: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle.fill() == 'yellow' ? 'purple' : 'yellow';
circle.fill(fill);
layer.draw();
},1000);
layer.add(circle);
var circle2 = new Konva.Circle({
x: 300,
y: 230,
sides: 3,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle2.fill() == 'black' ? '#ffba00' : 'black';
circle2.fill(fill);
layer.draw();
},1000);
layer.add(circle2);
var circle3 = new Konva.Circle({
x: 300,
y: 340,
sides: 3,
radius: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle3.fill() == 'black' ? 'green' : 'black';
circle3.fill(fill);
layer.draw();
},1000);
layer.add(circle3);
stage.add(layer);
Not sure if you want each circle to alternate colors, each for one second? The following will just draw each circle once and then go to the next one.
Instead of three separate functions for drawing the circle, you can have one that takes the circle to draw:
var drawCircle = function(circle) {
circle.fill(circle.fill);
layer.draw();
};
Then you will need a routine to cycle through the three circles and trigger completion:
var getNextCircle = function(prevCircle) {
if (!prevCircle) return circle;
if (prevCircle === circle) return circle2;
if (prevCircle === circle2) return circle3;
return undefined;
};
Now a routine to initiate once per second - setTimeout() is usually more useful than setInterval():
var prevCircle = undefined;
var drawCircles = function() {
var nextCircle = getNextCircle(prevCircle);
if (nextCircle) {
drawCircle(nextCircle);
prevCircle = nextCircle;
if (prevCircle) {
setTimeout(drawCircles, 1000);
}
}
};
Finally, you can kick it off:
drawCircles();
Based on your code you could simply increase setInterval()'s value on circle2 & 3 by 1000 (1 second - or adjust as desired):
var circle = new Konva.Circle({
x: 300,
y: 120,
sides: 3,
radius: 50,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle.fill() == 'yellow' ? 'purple' : 'yellow';
circle.fill(fill);
layer.draw();
}, 1000);
layer.add(circle);
var circle2 = new Konva.Circle({
x: 300,
y: 230,
sides: 3,
radius: 50,
fill: 'red',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle2.fill() == 'black' ? '#ffba00' : 'black';
circle2.fill(fill);
layer.draw();
}, 2000);
layer.add(circle2);
var circle3 = new Konva.Circle({
x: 300,
y: 340,
sides: 3,
radius: 50,
fill: 'blue',
stroke: 'black',
strokeWidth: 4
});
setInterval(function() {
var fill = circle3.fill() == 'black' ? 'green' : 'black';
circle3.fill(fill);
layer.draw();
}, 3000);
layer.add(circle3);
stage.add(layer);
I'm using Konva JS in my project. I'm adding a shape on a button click which is draggable. On click of the shape i need to get X and Y positions of the shape. getX and getY functions are returning the original X and Y. How can I update the X and Y after dragging.
Example code below.
var stage = new Konva.Stage({
container: 'canvas', // id of container <div>
width: 500,
height:300
});
jQuery("#add-shape").click(function(){
addShape();
});
var addShape = function(){
console.log("add shape");
var layer = new Konva.Layer();
var parentContainer = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
width: 200,
height: 60,
cornerRadius: 10,
fill: '#ccc'
});
var smallCircle = new Konva.Circle({
x: stage.getWidth() / 2 + 200,
y: stage.getHeight() / 2 + 30,
radius: 15,
fill: "#F2784B",
stroke: "white",
strokeWidth: 2
});
smallCircle.on('click', function() {
console.log(this.getX(),this.getY());
addArrow(this.getX(),this.getY());
//get current X and Y here instead of origina X and Y
});
layer.add(parentContainer);
layer.add(smallCircle);
layer.draggable('true');
stage.add(layer);
}
var addArrow = function(arrowX,arrowY){
var connectorLayer = new Konva.Layer();
var connector = new Konva.Arrow({
points: [arrowX,arrowY,arrowX+10,arrowY],
pointerLength: 4,
pointerWidth: 4,
fill: 'black',
stroke: 'black',
strokeWidth: 2
});
connectorLayer.add(connector);
stage.add(connectorLayer);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.0.2/konva.min.js"></script>
<button id="add-shape">
Add shape
</button>
<div id="canvas">
</div>
If you need to get a mouse position you can use:
smallCircle.on('click', function() {
console.log(stage.getPointerPosition());
});
box.on('mouseout', function () {
document.body.style.cursor = 'default';
console.log(box.attrs.x);
console.log(box.attrs.y);
});
I don't know if this is what you're looking for and it's too late but i'll post it anyway for future developers..
Lets say this is my watermark image inside the layer and bluh bluh and i want it's position getX() and getY(): I use the group like this:
First the regular stuff to add the image:
function update(activeAnchor) {
var group = activeAnchor.getParent();
var topLeft = group.get('.topLeft')[0];
var topRight = group.get('.topRight')[0];
var bottomRight = group.get('.bottomRight')[0];
var bottomLeft = group.get('.bottomLeft')[0];
var image = group.get('Image')[0];
var anchorX = activeAnchor.getX();
var anchorY = activeAnchor.getY();
// update anchor positions
switch (activeAnchor.getName()) {
case 'topLeft':
topRight.setY(anchorY);
bottomLeft.setX(anchorX);
break;
case 'topRight':
topLeft.setY(anchorY);
bottomRight.setX(anchorX);
break;
case 'bottomRight':
bottomLeft.setY(anchorY);
topRight.setX(anchorX);
break;
case 'bottomLeft':
bottomRight.setY(anchorY);
topLeft.setX(anchorX);
break;
}
image.position(topLeft.position());
var width = topRight.getX() - topLeft.getX();
var height = bottomLeft.getY() - topLeft.getY();
if (width && height) {
image.width(width);
image.height(height);
}
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Konva.Circle({
x: x,
y: y,
stroke: '#666',
fill: '#ddd',
strokeWidth: 2,
radius: 8,
name: name,
draggable: true,
dragOnTop: false
});
anchor.on('dragmove', function () {
update(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);
}
var stage = new Konva.Stage({
container: 'container',
width: 595,
height: 842
});
var layer = new Konva.Layer();
stage.add(layer);
//WaterMark
var WaterMarkImg = new Konva.Image({
width: 595,
height: 842
});
var WaterMarkGroup = new Konva.Group({
x: 0,
y: 0,
draggable: true
});
layer.add(WaterMarkGroup);
WaterMarkGroup.add(WaterMarkImg);
addAnchor(WaterMarkGroup, 0, 0, 'topLeft');
addAnchor(WaterMarkGroup, 595, 0, 'topRight');
addAnchor(WaterMarkGroup, 595, 842, 'bottomRight');
addAnchor(WaterMarkGroup, 0, 842, 'bottomLeft');
var imageObj1 = new Image();
imageObj1.onload = function () {
WaterMarkImg.image(imageObj1);
layer.draw();
};
imageObj1.src = "some image Url";
and this is simply the getX(): very simple
var x = WaterMarkGroup.getX();
alert(x);
I hope this helps anyone looking for it.
This is not the exact answer for the question. point is the draggable shape.
point.on('dragmove', (t) => {
console.log("dragmove", t.target.x(), t.target.y());
});
use shape.getAttr("x") and shape.getAttr("y"), following is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--mobile friendly-->
<meta name="viewport" content="width=device-width, user-scalable=yes">
</head>
<body>
<div id="c"></div>
<script type="module">
import "../../node_modules/konva/konva.js"
var stage = new Konva.Stage({
container: "#c",
width: 500,
height: 500
})
var layer = new Konva.Layer()
stage.add(layer)
var c = (x, y) => {
return new Konva.Circle({
x: x,
y: y,
stroke: "lightblue",
strokeWidth: 2,
radius: 10,
draggable: true
})
}
let c1 = c(50, 50)
layer.add(c1)
var c2 = c(100, 50)
layer.add(c2)
c1.on("dragmove", () => {
c2.setAttr("y", c1.getAttr("y"))
})
layer.draw()
</script>
</body>
</html>
I'm trying to make clickable field between all circles. Any idea?
My code: http://jsfiddle.net/LKHSw/
var bok = 700,
width = bok,
height = width,
radius = bok / 5,
stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Kinetic.Layer();
var a = new Kinetic.Circle({
x: bok / 3,
y: bok / 3,
radius: radius,
fill: 'red'
});
var b = new Kinetic.Circle({
x: a.getX() + radius,
y: a.getY(),
radius: radius,
fill: 'blue'
});
var c = new Kinetic.Circle({
x: (b.getX() + a.getX()) / 2,
y: a.getY() + radius,
radius: radius,
fill: 'green'
});
var clipper = function (ctx, clipped, clip, self) {
ctx.beginPath();
ctx.arc(clip.getX(), clip.getY(), clip.getRadius(), 0, 2 * Math.PI, false);
ctx.clip();
ctx.beginPath();
ctx.arc(clipped.getX(), clipped.getY(), clipped.getRadius(), 0, 2 * Math.PI, false);
ctx.fillStrokeShape(self);
};
var ab = new Kinetic.Shape({
drawFunc: function (context) {
clipper(context, a, b, this);
},
fill: 'yellow'
});
var bc = new Kinetic.Shape({
drawFunc: function (context) {
clipper(context, b, c, this);
},
fill: 'pink'
});
var ca = new Kinetic.Shape({
drawFunc: function (context) {
clipper(context, c, a, this);
},
fill: 'orange'
});
layer.add(a);
layer.add(b);
layer.add(c);
layer.add(ab);
layer.add(bc);
layer.add(ca);
var hover = function (shape) {
var defaultColor;
shape.on('mouseover', function () {
defaultColor = shape.getFill();
shape.setFill('black');
layer.draw();
}).on('mouseout', function () {
shape.setFill(defaultColor);
layer.draw();
});
};
hover(a);
hover(b);
hover(c);
hover(ab);
hover(bc);
hover(ca);
stage.add(layer);
This is a crude implementation using your clipper function: (updated fiddle)
var clipper2 = function (ctx, clipped, clip1, clip2, self) {
ctx.beginPath();
ctx.arc(clip1.getX(), clip1.getY(), clip1.getRadius(), 0, 2 * Math.PI, false);
ctx.clip();
ctx.beginPath();
ctx.arc(clip2.getX(), clip2.getY(), clip2.getRadius(), 0, 2 * Math.PI, false);
ctx.clip();
ctx.beginPath();
ctx.arc(clipped.getX(), clipped.getY(), clipped.getRadius(), 0, 2 * Math.PI, false);
ctx.fillStrokeShape(self);
};
And declare your shape as below -
var abc = new Kinetic.Shape({
drawFunc: function (context) {
clipper2(context, c, a, b, this);
},
fill: 'white'
});