I am using kinetics Javascript. I draw a couple of rect, it smooths. When mouse focus on Rect, I want to show some points/joints on the rect, so that it gives hints rect could be linked with each other by this particular points/joints. I have other pictures also, for example triangle, it shall also has joints. How to have a figure(Rect for example) when it is normal state and another state with little bit changed figure when mouse focuses?
The simplest would be to display a "linkable" icon on top of any rectangle that the mouse enters and remove that icon when the mouse leaves.
Demo: http://jsfiddle.net/m1erickson/6dgAD/
You can handle mouseenter and mouseleave events on your rectangles like this:
This code puts a Kinetic.Image containing a "linkable" icon over the rect.
rect.on("mouseenter",function(){
link.setPosition(this.getPosition());
link.show();
layer.draw();
});
rect.on("mouseleave",function(){
link.hide();
layer.draw();
});
Here's an example of how you might create a "linkable" icon using Kinetic.Image:
var link;
var img=new Image();
img.onload=function(){
link=new Kinetic.Image({
image:img,
listening:false,
});
layer.add(link);
link.hide();
layer.draw();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/addLink.png";
Related
I have a Konva stage that currently displays a series of shapes. I would like to have a shapes panel, where I can drag shapes and insert into the canvas.
There are currently two ways of doing this:
Adding the Shapes Panel to the Konva stage as it's own layer and entity
Having the Shapes Panel as a standalone HTML element outside the Konva stage and implement a draggable js library to handle dragging behaviour
I'd rather option 2; being able to style the shapes panel with CSS and yield a number of other DOM related benefits is more attractive to me right now.
I have the dragging behaviour sorted, but there is one issue: even though I've implemented stage mouseover events, dragging an element that originates from outside the canvas to on top of the canvas doesn't actually trigger the stage event listeners.
Is there a way around this?
What's interesting is that if you click and hold the mouse outside the element and hover over the canvas, the event listeners fire. But, when you're actually dragging an element (text, image), the event listeners do not fire...
Take a look into this demo: https://konvajs.org/docs/sandbox/Drop_DOM_Element.html
var con = stage.container();
con.addEventListener('dragover', function(e) {
e.preventDefault(); // !important
});
con.addEventListener('drop', function(e) {
e.preventDefault();
// now we need to find pointer position
// we can't use stage.getPointerPosition() here, because that event
// is not registered by Konva.Stage
// we can register it manually (with private method):
stage.setPointersPositions(e);
// now you can add a shape. We will add an image
Konva.Image.fromURL('/assets/yoda.jpg', function(image) {
layer.add(image);
image.position(stage.getPointerPosition());
image.draggable(true);
layer.draw();
});
});
I've been using easelJS within the createJS framework for a project and have enjoyed it a lot until recently hitting a roadblock. I have multiple objects that I'd like to move simultaneously when one of the group is dragged. Here is my current situation:
What I'd like to do is when the red circle is moved, the red crosshairs would also move so that they appear to be "locked" to the circle. The same with the green circle.
I have been able to accomplish something very close to this by adding the circles and crosshairs to a container, as mentioned in the answers to this question:
Easeljs Scrollable Container
But the issue I encounter is that the container is actually a rectangle, such that I can click anywhere between the circle and crosshairs to move the various objects contained within the container. Instead I would like for the objects to be moved only when I click on a circle.
Does anyone have any idea how to accomplish this? Am I correct in thinking this can be accomplished somehow with easelJS containers?
Containers should be fine. You can turn off mouseEnabled on the cross-hair in order to make it ignore the mouse.
You could also just store the offset for each cross-hair/circle, and just set the cross-hair position when the circle moves.
Here is a quick demo:
http://jsfiddle.net/lannymcnie/kah9of6e/
// Set the offset when the circle is pressed
circle.on("mousedown", function(e) {
circle.offset = new createjs.Point(crosshair.x-circle.x, crosshair.y-circle.y);
});
// Add drag and drop to each shape
circle.on("pressmove", handleDrag);
crosshair.on("pressmove", handleDrag);
function handleDrag(e) {
// Move the target to the mouse
e.target.x = e.stageX; e.target.y = e.stageY;
// If the target is the circle, also move the cross-hair
if (e.target == circle) {
// Move the cross-hair
crosshair.x = circle.x + circle.offset.x;
x.y = circle.y + circle.offset.y;
}
}
I am new in canvas can anyone please help to short this issue.
I create 5 canvas circle. When I hover on any circle I need to change canvas color only, when hover on circle I added one class on canvas but is it possible to change only color. I don't want to create canvas again change only color when hover.
$(document).ready(function(){
$('.menuballs').hover(function () {
$(".menuballs").children('canvas').toggleClass('hover-intro');
if($(this).is(':hover'))
{
var c = document.getElementsByClassName("hover-intro");
var graphics = c.getContext( '2d' );
graphics.fillStyle = 'green';
graphics.fill();
}
});
});
Try this as taking hover-intro class but its given HTMLElement, and I need CanvasElement to fill in circle.
Your :hover will never be triggered.
Circles drawn on html canvas are not DOM elements. Instead they are like forgotten painted pixels on a canvas.
These are the steps to apply a hover-effect to your circle
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
Listen for mousemove events and test if the mouse is inside your circle
When the mouse enters or leaves your circle, redraw your circle
This is how those steps might look in code:
Demo: http://jsfiddle.net/m1erickson/rV9cZ/
Keep track of your circle's definition (x,y,radius,etc) in a javascript object.
var myCircle={
x:150,
y:150,
radius:25,
rr:25*25, // radius squared
hovercolor:"red",
blurcolor:"green",
isHovering:false
}
Listen for mousemove events and test if the mouse is inside your circle
function handleMouseMove(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
var dx=mouseX-myCircle.x;
var dy=mouseY-myCircle.y;
// math to test if mouse is inside circle
if(dx*dx+dy*dy<myCircle.rr){
// change to hovercolor if previously outside
if(!myCircle.isHovering){
myCircle.isHovering=true;
drawCircle(myCircle);
}
}else{
// change to blurcolor if previously inside
if(myCircle.isHovering){
myCircle.isHovering=false;
drawCircle(myCircle);
}
}
}
When the mouse enters or leaves your circle, redraw your circle
function drawCircle(circle){
ctx.beginPath();
ctx.arc(circle.x,circle.y,circle.radius,0,Math.PI*2);
ctx.closePath();
ctx.fillStyle=circle.isHovering?circle.hovercolor:circle.blurcolor;
ctx.fill();
}
I am new to JsxGraph. My usecase is to drag circle with its body or area, that is dragging from inside of its Circumference or area. I found all of jsxgraph Circle event like drag, mousedown etc,work only when we click over its Circumference border and do not fire when click inside the circle.
Can anyone point me in the right direction?
Circles can be constructed with the attribute hasInnerPoints which does exactly this.
Example:
var circ = board.create('circle', [...], {hasInnerPoints: true});
I'm just learning Kinetic.js, and I really enjoy how easy it's making using the HTML5 <canvas> element.
I have a large layer that's bigger than the "stage" (to use Kinetic parlance) but is draggable. The drag functionality seems to interfere with the click handler in two different ways: Some single clicks do not register; and and of those that do, the location is only accurate if the layer is in its original position.
Here's a fiddle displaying the issue I'm having. In my actual code, the bottom layer is actually an image.
http://jsfiddle.net/EKaAv/1/
layer.on ('click', function(e) {
console.log(e);
var mousePos = stage.getMousePosition(); // mouse position relative to stage
var xclick = mousePos.x;
var yclick = mousePos.y;
var circle = new Kinetic.Circle({
x: xclick - layer.getX(), // since position is relative to stage, adjust by layer X
y: yclick - layer.getY(), // same as above
radius: 25,
fill: 'red',
opacity: 0.5
});
layer.add(circle);
stage.draw(); // redraw the stage immediately
});
Any clicks that seem to not be registered are due to the draggable event firing which overrides the click event.