Snap.svg: casting a shadow from a masked shape - javascript

I'm trying to make a material-ish design wherein there's two layers with a shadow in between. I figured the simplest way to do this would be to draw the bottom layer directly (simply a covering rectangle for the background) and then draw another rectangle, using a mask, to draw the content of the image. This rectangle should be casting a shadow, but I believe that due to the shadow being outside the mask, it is not being rendered. How can I make it render?
Codepen demonstration: https://codepen.io/Krakob/pen/OjqNKP (on site snippet doesn't seem to be loading snap properly)
Used code:
function logo(conf) {
if (typeof conf === 'undefined') {
var ch = 0.5; // Hue
var cs = 0.4; // Saturation
var cl = 0.5; // Luminosity
conf = {
text: ':^(',
c_fg: Snap.hsl(ch, cs, cl),
c_bg: Snap.hsl(ch, cs * 0.9, cl * 0.4),
border: 10,
tri_height: 20
}
};
var canvas = Snap(100, 100);
var foregr = Snap(100, 100);
// Cover up the back of the canvas
canvas.rect(0, 0, 100, 100).attr('fill', conf.c_bg);
// Fill up the foreground with white
foregr.rect(0, 0, 100, 100).attr('fill', 'white');
// Subtract a circle
foregr.circle(50, 50, 50 - conf.border).attr('fill', 'black');
// Left triangle
foregr.polygon([
0, 50 - conf.tri_height / 2,
0, 50 + conf.tri_height / 2,
conf.tri_height, 50
]).attr({
fill: 'white',
});
// Top triangle
foregr.polygon([
50 - conf.tri_height / 2, 0,
50 + conf.tri_height / 2, 0,
50, conf.tri_height
]).attr({
fill: 'white',
})
foregr.text(50, 50, conf.text).attr({
fill: 'white',
'text-anchor': 'middle',
'alignment-baseline': 'middle',
'font-size': '2em',
'font-family': 'Quicksand',
});
var shadow = canvas.filter(Snap.filter.shadow(2.5, 2.5, 0, 'red', 1));
canvas.rect(0, 0, 100, 100).attr({
fill: conf.c_fg,
mask: foregr,
filter: shadow
})
return canvas;
}
logo();
<html>
<head>
<title>:^(</title>
</head>
<body>
<script src="https://raw.githubusercontent.com/adobe-webplatform/Snap.svg/master/dist/snap.svg.js"></script>
<script src="my.js"></script>
</body>
</html>

Related

I can't figure out how to get these color variables to work in the draw function

I have been trying to use built-in functions in p5.js but I can't figure out what I am doing wrong, the col variable won't assign to moon.brightness rather the moon is always white when I preview it, I assigned my variables col and dor before the setup function and called them in the setup function before I initialised the Moon variable, at a total loss here, new to using p5.js so any help about where I am going wrong would be appreciated
var groundHeight;
var mountain1;
var mountain2;
var tree;
var moon;
var sun;
var darkness;
var brightness;
var col;
var dor;
function setup() {
cnv = createCanvas(800, 600)
//set the groundHeight proportional to the canvas size
groundHeight = (height / 3) * 2;
//initalise the mountain objects with properties to help draw them to the canvas
mountain1 = {
x: 400,
y: groundHeight,
height: 320,
width: 230
};
mountain2 = {
x: 550,
y: groundHeight,
height: 200,
width: 130
};
//initalise the tree object
tree = {
x: 150,
y: groundHeight + 20,
trunkWidth: 40,
trunkHeight: 150,
canopyWidth: 120,
canopyHeight: 100
};
//initalise the sun
sun = {
x: 150,
y: 70,
diameter: 80
};
col = (150, 200, 255)
dor = (255, 255, 255)
//TASK: intialise a moon object with an extra property for brightness
moon = {
brightness: col,
x: 700,
y: 70,
diameter: 80
};
//set the initial darkness
darkness = {
x: 800,
y: 600,
light: col
};
}
function draw() {
//TASK: update the values for the moons brightness, the sun's position and the darkness.
//You can either map this to the mouse's location (i.e. the futher left the mouse is the more daylight) or you can just change the values gradually over time.
//draw the sky
background(150, 200, 255);
noStroke();
//draw the sun
fill(255, 255, 0);
ellipse(sun.x, sun.y, sun.diameter);
sun.y = map(mouseX, 0, 800, 70, 630)
fill(moon.brightness)
ellipse(moon.x, moon.y, moon.diameter);
moon.brightness = map(mouseX, 0, 800, col, dor);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
There are two issues here:
In JavaScript the expression (1, 2, 3) does not create a an array, or a vector, or a tuple, or anything that could be used to represent a color. The comma operator evaluates the expression on the left, and the regardless of the value of that expression, it evaluates an expression on the right.
The p5.js map() function does not work with colors, it only works with numbers. If you're working with colors you need to use lerpColor()
var groundHeight;
var mountain1;
var mountain2;
var tree;
var moon;
var sun;
var col;
var dor;
function setup() {
cnv = createCanvas(800, 600)
//set the groundHeight proportional to the canvas size
groundHeight = (height / 3) * 2;
//initalise the mountain objects with properties to help draw them to the canvas
mountain1 = {
x: 400,
y: groundHeight,
height: 320,
width: 230
};
mountain2 = {
x: 550,
y: groundHeight,
height: 200,
width: 130
};
//initalise the tree object
tree = {
x: 150,
y: groundHeight + 20,
trunkWidth: 40,
trunkHeight: 150,
canopyWidth: 120,
canopyHeight: 100
};
//initalise the sun
sun = {
x: 150,
y: 70,
diameter: 80
};
// FIXED: Use the color function to create a p5.Color object from R G and B components
col = color(150, 200, 255)
dor = color(255, 255, 255)
//TASK: intialise a moon object with an extra property for brightness
moon = {
brightness: col,
x: 700,
y: 70,
diameter: 80
};
}
function draw() {
//TASK: update the values for the moons brightness, the sun's position and the darkness.
//You can either map this to the mouse's location (i.e. the futher left the mouse is the more daylight) or you can just change the values gradually over time.
scale
//draw the sky
background(150, 200, 255);
noStroke();
//draw the sun
fill(255, 255, 0);
ellipse(sun.x, sun.y, sun.diameter);
sun.y = map(mouseX, 0, 800, 70, 630)
fill(moon.brightness)
ellipse(moon.x, moon.y, moon.diameter);
// FIXED: when interpolating between two colors, use lerpColor instead of map
moon.brightness = lerpColor(col, dor, mouseX / width);
}
html, body {
margin: 0;
padding: 0;
}
canvas {
transform: scale(0.25);
transform-origin: top left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>

Rotate a group of shapes containing text whilst keeping text centered and horizontal

This is probably just maths.
I am using Konva to dynamically generate shapes, which I'm storing as a label. So there's a label which contains a textElement and a rectangle. I want to make sure text in that rectangle is always a) Centered horizontally and vertically and b) facing the right way up.
So a rectangle could have any rotation, but I always want the text centered and facing the right way up.
The code for creation; width, height, rotation, x and y all have values pulled from a database.
var table = new Konva.Label({
x: pos_x,
y: pos_y,
width: tableWidth,
height: tableHeight,
draggable:true
});
table.add(new Konva.Rect({
width: tableWidth,
height: tableHeight,
rotation: rotation,
fill: fillColor,
stroke: strokeColor,
strokeWidth: 4
}));
table.add(new Konva.Text({
width: tableWidth,
height: tableHeight,
x: pos_x, //Defaults to zero
y: pos_y, //Default to zero
text: tableNumber,
verticalAlign: 'middle',
align: 'center',
fontSize: 30,
fontFamily: 'Calibri',
fill: 'black'
}))
tableLayer.add(table);
The problem is, if rotation is in place, text is off center, as in this image:
I do manually correct in some circumstances - for example if rotation = 45 degrees:
pos_x = -tableWidth/2;
pos_y = tableHeight/5;
but that is not a permanent solution. I want the x and y co-ordinates of the text to be at the centerpoint of the shape itself.
I've tried a few approaches (such as applying rotation to the Label itself and then negative rotation value to the text)
This code snippet illustrates a solution. It is copied & modified from my other self-answer when I was looking for a robust approach to rotation around an arbitrary point - note that I consider this a slightly different question than my original so I have not suggested this is a dup. The difference is the need to work with a more complex grouped shape and to keep some element within that group unrotated.
Not in the OP's question, but I set a background rectangle into the text by making the text a group. The purpose of this was to show that the text rectangle will extend outside the label rectangle in some points of rotation. This is not a critical issue but it is useful to see it happen.
The fundamental challenge for the coder is to understand how the shapes move when rotated since we usually want to spin them around their centre but the fundamental 2D canvas pattern that Konva (and all HTML5 canvas wrappers) follow is to rotate from the top-left corner, al least for rectangles as per shapes in the question. It 'is' possible to move the rotation point (known as the offset) but again that is a conceptual challenge for the dev and a nice trap for anyone trying to support the code later.
There's a lot of code in this answer that is here to set up something dynamic that you can use to visualise what is going on. However, the crux is in this:
// This is the important call ! Cross is the rotation point as illustrated by crosshairs.
rotateAroundPoint(shape, rotateBy, {x: cross.x(), y: cross.y()});
// The label is a special case because we need to keep the text unrotated.
if (shape.name() === 'label'){
let text = shape.find('.text')[0];
rotateAroundPoint(text, -1 * rotateBy, {x: text.getClientRect().width/2, y: text.getClientRect().height/2});
}
The rotateAroundPoint() function takes as parameters the Konva shape to rotate, the clockwise rotation angle (not radians, good ole degrees), and the x & y position of the rotation point on the canvas / parent.
I constructed a group of shapes as my label, composing it from a rectangle and a text shape. I named this 'label'. Actually I switched the text shape to be another group of rect + text to that I could show the rectangle the text sits within. You could leave out the extra group. I named this 'text'.
The first call to rotateAroundPoint() rotates the group named 'label'. So the group rotates on the canvas. Since the 'text' is a child of the 'label' group, that would leave the 'text' rotated, so the next line checks if we are working with the 'label' group, and if so we need to get hold of the 'text' shape which is what this line does:
let text = shape.find('.text')[0];
In Konva the result of a find() is a list so we take the first in the list. Now all that remains for me to do is rotate the text on the 'label' group back again by applying the negative rotation degrees to its center point. The line below achieves this.
rotateAroundPoint(text, -1 * rotateBy, {x: text.getClientRect().width/2, y: text.getClientRect().height/2});
One note worthy of mention - I used a group for my 'text' shape. A Konva group does not naturally have a width or height - it is more of a means to collect shapes together but without a 'physical' container. So to get its width and height for the centre point calculations I use the group.getClientRect() method which gives the size of the minimum bounding box that would contain all shapes in the group, and yields an object formed as {width: , height: }.
Second note - the first use of rotateAroundPoint() affects the 'label' group which has as its parent the canvas. The second use of that function affects the 'text' group which has the 'label' group as its parent. Its subtle but worth knowing.
Here is the snippet. I urge you to run it fullscreen and spin a few shapes around a few different points.
// Code to illustrate rotation of a shape around any given point. The important functions here is rotateAroundPoint() which does the rotation and movement math !
let
angle = 0, // display value of angle
startPos = {x: 80, y: 45},
shapes = [], // array of shape ghosts / tails
rotateBy = 20, // per-step angle of rotation
shapeName = $('#shapeName').val(), // what shape are we drawing
shape = null,
ghostLimit = 10,
// Set up a stage
stage = new Konva.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
}),
// add a layer to draw on
layer = new Konva.Layer(),
// create the rotation target point cross-hair marker
lineV = new Konva.Line({points: [0, -20, 0, 20], stroke: 'lime', strokeWidth: 1}),
lineH = new Konva.Line({points: [-20, 0, 20, 0], stroke: 'lime', strokeWidth: 1}),
circle = new Konva.Circle({x: 0, y: 0, radius: 10, fill: 'transparent', stroke: 'lime', strokeWidth: 1}),
cross = new Konva.Group({draggable: true, x: startPos.x, y: startPos.y}),
labelRect, labelText;
// Add the elements to the cross-hair group
cross.add(lineV, lineH, circle);
layer.add(cross);
// Add the layer to the stage
stage.add(layer);
$('#shapeName').on('change', function(){
shapeName = $('#shapeName').val();
shape.destroy();
shape = null;
reset();
})
// Draw whatever shape the user selected
function drawShape(){
// Add a shape to rotate
if (shape !== null){
shape.destroy();
}
switch (shapeName){
case "rectangle":
shape = new Konva.Rect({x: startPos.x, y: startPos.y, width: 120, height: 80, fill: 'magenta', stroke: 'black', strokeWidth: 4});
break;
case "hexagon":
shape = new Konva.RegularPolygon({x: startPos.x, y: startPos.y, sides: 6, radius: 40, fill: 'magenta', stroke: 'black', strokeWidth: 4});
break;
case "ellipse":
shape = new Konva.Ellipse({x: startPos.x, y: startPos.y, radiusX: 40, radiusY: 20, fill: 'magenta', stroke: 'black', strokeWidth: 4});
break;
case "circle":
shape = new Konva.Ellipse({x: startPos.x, y: startPos.y, radiusX: 40, radiusY: 40, fill: 'magenta', stroke: 'black', strokeWidth: 4});
break;
case "star":
shape = new Konva.Star({x: startPos.x, y: startPos.y, numPoints: 5, innerRadius: 20, outerRadius: 40, fill: 'magenta', stroke: 'black', strokeWidth: 4});
break;
case "label":
shape = new Konva.Group({name: 'label'});
labelRect = new Konva.Rect({x: 0, y: 0, width: 120, height: 80, fill: 'magenta', stroke: 'black', strokeWidth: 4, name: 'rect'})
shape.add(labelRect);
labelText = new Konva.Group({name: 'text'});
labelText.add(new Konva.Rect({x: 0, y: 0, width: 100, height: 40, fill: 'cyan', stroke: 'black', strokeWidth: 2}))
labelText.add(new Konva.Text({x: 0, y: 0, width: 100, height: 40, text: 'Wombat',fontSize: 20, fontFamily: 'Calibri', align: 'center', padding: 10}))
shape.add(labelText)
labelText.position({x: (labelRect.width() - labelText.getClientRect().width) /2, y: (labelRect.height() - labelText.getClientRect().height) /2})
break;
};
layer.add(shape);
cross.moveToTop();
}
// Reset the shape position etc.
function reset(){
drawShape(); // draw the current shape
// Set to starting position, etc.
shape.position(startPos)
cross.position(startPos);
angle = 0;
$('#angle').html(angle);
$('#position').html('(' + shape.x() + ', ' + shape.y() + ')');
clearTails(); // clear the tail shapes
stage.draw(); // refresh / draw the stage.
}
// Click the stage to move the rotation point
stage.on('click', function (e) {
cross.position(stage.getPointerPosition());
stage.draw();
});
// Rotate a shape around any point.
// shape is a Konva shape
// angleRadians is the angle to rotate by, in radians
// point is an object {x: posX, y: posY}
function rotateAroundPoint(shape, angleDegrees, point) {
let angleRadians = angleDegrees * Math.PI / 180; // sin + cos require radians
const x =
point.x +
(shape.x() - point.x) * Math.cos(angleRadians) -
(shape.y() - point.y) * Math.sin(angleRadians);
const y =
point.y +
(shape.x() - point.x) * Math.sin(angleRadians) +
(shape.y() - point.y) * Math.cos(angleRadians);
shape.rotation(shape.rotation() + angleDegrees); // rotate the shape in place
shape.x(x); // move the rotated shape in relation to the rotation point.
shape.y(y);
shape.moveToTop(); //
}
$('#rotate').on('click', function(){
let newShape = shape.clone();
shapes.push(newShape);
layer.add(newShape);
// This ghost / tails stuff is just for fun.
if (shapes.length >= ghostLimit){
shapes[0].destroy();
shapes = shapes.slice(1);
}
for (var i = shapes.length - 1; i >= 0; i--){
shapes[i].opacity((i + 1) * (1/(shapes.length + 2)))
};
// This is the important call ! Cross is the rotation point as illustrated by crosshairs.
rotateAroundPoint(shape, rotateBy, {x: cross.x(), y: cross.y()});
// The label is a special case because we need to keep the text unrotated.
if (shape.name() === 'label'){
let text = shape.find('.text')[0];
rotateAroundPoint(text, -1 * rotateBy, {x: text.getClientRect().width/2, y: text.getClientRect().height/2});
}
cross.moveToTop();
stage.draw();
angle = angle + 10;
$('#angle').html(angle);
$('#position').html('(' + Math.round(shape.x() * 10) / 10 + ', ' + Math.round(shape.y() * 10) / 10 + ')');
})
// Function to clear the ghost / tail shapes
function clearTails(){
for (var i = shapes.length - 1; i >= 0; i--){
shapes[i].destroy();
};
shapes = [];
}
// User cicks the reset button.
$('#reset').on('click', function(){
reset();
})
// Force first draw!
reset();
body {
margin: 10;
padding: 10;
overflow: hidden;
background-color: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/konva#^3/konva.min.js"></script>
<p>1. Click the rotate button to see what happens when rotating around shape origin.</p>
<p>2. Reset then click stage to move rotation point and click rotate button again - rinse & repeat</p>
<p>
<button id = 'rotate'>Rotate</button>
<button id = 'reset'>Reset</button>
<select id='shapeName'>
<option value='label' selected='selected'>Label</option>
<option value='rectangle'>Rectangle</option>
<option value='hexagon'>Polygon</option>
<option value='ellipse' >Ellipse</option>
<option value='circle' >Circle</option>
<option value='star'>Star</option>
</select>
Angle : <span id='angle'>0</span>
Position : <span id='position'></span>
</p>
<div id="container"></div>

KonvaJS - Rotate rectangle around cursor without using offset

I am using KonvaJS to drag and drop rectangles into predefined slots. Some of the slots need to be rotated 90 degrees. I have a hit box around the slots that are rotated vertically, so when the user drags the rectangle into the area it will rotate 90 degrees automatically (to match the orientation). When it rotates, it moves out from under the mouse. This can be solved with offset, but then the rectangle doesn't visually line up with the boxes after snapping. This can (probably) be solved with additional code.
I have tried to rotate the rectangle, and then move it under the mouse. Since the user is still dragging it, this doesn't seem to work as I planned.
Is it possible to force the rectangle to rotate under the mouse without using offset?
Here is a fiddle showing the issue - The offset problems can be demonstrated by setting the first variable to true.
https://jsfiddle.net/ChaseRains/1k0aqs2j/78/
var width = window.innerWidth;
var height = window.innerHeight;
var rectangleLayer = new Konva.Layer();
var holdingSlotsLayer = new Konva.Layer();
var controlLayer = new Konva.Layer();
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height,
draggable: true
});
//vertical holding spot
holdingSlotsLayer.add(new Konva.Rect({
x: 300,
y: 25,
width: 130,
height: 25,
fill: '#fff',
draggable: false,
rotation: 90,
stroke: '#000'
}));
//horizontal holding spot
holdingSlotsLayer.add(new Konva.Rect({
x: 25,
y: 75,
width: 130,
height: 25,
fill: '#fff',
draggable: false,
rotation: 0,
stroke: '#000'
}));
//mask to set boundaries around where we wannt to flip the rectangle
controlLayer.add(new Konva.Rect({
x: 215,
y: 15,
width: 150,
height: 150,
fill: '#fff',
draggable: false,
name: 'A',
opacity: 0.5
}));
stage.add(holdingSlotsLayer, controlLayer);
//function for finding intersections
function haveIntersection(placeHolder, rectangle, zone) {
if (rectangle.rotation == 0 || zone == true) {
return !(
rectangle.x > placeHolder.x + placeHolder.width ||
rectangle.x + rectangle.width < placeHolder.x ||
rectangle.y > placeHolder.y + placeHolder.height ||
rectangle.y + rectangle.height < placeHolder.y
);
} else {
return !(
rectangle.x > placeHolder.x + 25 ||
rectangle.x + rectangle.width < placeHolder.x ||
rectangle.y > placeHolder.y + placeHolder.height + 90 ||
rectangle.y + rectangle.height < placeHolder.y
);
}
}
//function to create rectangle group (so we can place text on the rectangle)
function spawnRectangle(angle) {
var rectangleGroup = new Konva.Group({
x: 95,
y: 95,
width: 130,
height: 25,
rotation: angle,
draggable: true,
});
rectangleGroup.add(new Konva.Rect({
width: 130,
height: 25,
fill: 'lightblue'
}));
rectangleGroup.add(new Konva.Text({
text: '123',
fontSize: 18,
fontFamily: 'Calibri',
fill: '#000',
width: 130,
padding: 5,
align: 'center'
}));
//function tied to an on drag move event
rectangleGroup.on('dragmove', (e) => {
//shrink rectangle hitbox for use in placeholder intersection
var dimensions = {
"height": 3,
"width": 5,
"x": e.target.attrs.x,
"y": e.target.attrs.y,
'rotation': e.target.attrs.rotation
};
//loop over holding slots to see if there is an intersection.
for (var i = 0; holdingSlotsLayer.children.length > i; i++) {
//if true, change the look of the slot we are hovering
if (haveIntersection(holdingSlotsLayer.children[i].attrs, dimensions, false)) {
holdingSlotsLayer.children[i].attrs.fill = '#C41230';
holdingSlotsLayer.children[i].attrs.dash = [10, 3];
holdingSlotsLayer.children[i].attrs.stroke = '#000';
//set attributes back to normal otherwise
} else {
holdingSlotsLayer.children[i].attrs.fill = '#fff';
holdingSlotsLayer.children[i].attrs.dash = null;
holdingSlotsLayer.children[i].attrs.stroke = null;
}
}
//check to see if we are in a zone that requires the rectangle to be flipped 90 degrees
if (haveIntersection(controlLayer.children[0].attrs, dimensions, true)) {
if (rectangleGroup.attrs.rotation != 90) {
rectangleGroup.attrs.rotation = 90;
}
} else {
rectangleGroup.attrs.rotation = 0;
}
stage.batchDraw();
});
rectangleGroup.on('dragend', (e) => {
for (var i = 0; holdingSlotsLayer.children.length > i; i++) {
//If the parking layer has an element that is lit up, then snap to position..
if (holdingSlotsLayer.children[i].attrs.fill == '#C41230') {
rectangleGroup.position({
x: holdingSlotsLayer.children[i].attrs.x,
y: holdingSlotsLayer.children[i].attrs.y
});
holdingSlotsLayer.children[i].attrs.fill = '#fff';
holdingSlotsLayer.children[i].attrs.dash = null;
holdingSlotsLayer.children[i].attrs.stroke = null;
}
}
stage.batchDraw();
});
rectangleLayer.add(rectangleGroup);
stage.add(rectangleLayer);
}
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #D3D3D3;
background-size: cover;
}
#desc {
position: absolute;
top: 5px;
left: 5px;
}
<script src="https://unpkg.com/konva#4.0.18/konva.min.js"></script>
<body>
<div id="container"></div>
<div id="desc">
<button onclick="spawnRectangle(0)">spawn rectangle</button>
</div>
</body>
Here is a simple function to rotate the rectangle under the mouse, without using konva offset(). I used a tween to apply the movement but if you prefer to use it without the tween just apply the rect.rotate() then apply the newPos x & y as the position.
EDIT: The OP pointed out that if you clicked, held the mouse down whilst the rectangle completed its animation, then dragged, then the rectangle would jump away. What gives ? Well, when the mousedown event runs Konva takes note of the shape's initial position in its internal drag function. Then when we start to actually drag the mouse, Konva dutifully redraws the shape in the position it calculates. Now, 'we' know that we moved the shape in out code, but we didn't let Konva in on our trick.
The fix is to call
rect.stopDrag();
rect.startDrag();
immediately after the new position has been set. Because I am using a tween I do this in the onFinish() callback function of one of the tweens - you would want to ensure its the final tween if you apply more than one. I got away with it because my tweens run over the same period. If you aren't using tweens, just call the above immediately you apply your last rotate() or position() call on the shape.
function rotateUnderMouse(){
// Get the stage position of the mouse
var mousePos = stage.getPointerPosition();
// get the stage position of the mouse
var shapePos = rect.position();
// compute the vector for the difference
var rel = {x: mousePos.x - shapePos.x, y: mousePos.y - shapePos.y}
// Now apply the rotation
angle = angle + 90;
// and reposition the shape to keep the same point in the shape under the mouse
var newPos = ({x: mousePos.x + rel.y , y: mousePos.y - rel.x})
// Just for fun, a tween to apply the move: See https://konvajs.org/docs/tweens/Linear_Easing.html
var tween1 = new Konva.Tween({
node: rect,
duration: 0.25,
x: newPos.x,
y: newPos.y,
easing: Konva.Easings.Linear,
onFinish: function() { rect.stopDrag(); rect.startDrag();}
});
// and a tween to apply the rotation
tween2 = new Konva.Tween({
node: rect,
duration: 0.25,
rotation: angle,
easing: Konva.Easings.Linear
});
tween2.play();
tween1.play();
}
function setup() {
// Set up a stage and a shape
stage = new Konva.Stage({
container: 'canvas-container',
width: 650,
height: 300
});
layer = new Konva.Layer();
stage.add(layer);
newPos = {x: 80, y: 40};
rect = new Konva.Rect({
width: 140, height: 50, x: newPos.x, y: newPos.y, draggable: true, stroke: 'cyan', fill: 'cyan'
})
layer.add(rect);
stage.draw()
rect.on('mousedown', function(){
rotateUnderMouse()
})
}
var stage, layer, rect, angle = 0;
setup()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/4.0.13/konva.js"></script>
<p>Click the rectangle - it will rotate under the mouse.</p>
<div id="canvas-container"></div>

How to draw an arc with fabric.js?

I want to draw an arc and I'm using a circle with a start and an end angle for this. But something is wrong. Here is my code for this:
var circle = new fabric.Circle({
radius: 30,
left: 20,
top: 20,
fill: "rgba(0, 0, 0, 0)",
stroke: 'black',
startAngle: 0,
endAngle: Math.PI
});
canvas.add(circle);
You can see (on jsfiddle) it always draws a complete circle — http://jsfiddle.net/tfn1772f/
What is wrong?
What about drawing an arc via fabric.Path? Try something like this:
var arc1 = new fabric.Path("M 255 135 A 50 50 0 0 1 200 110", {
stroke: 'black',
fill: "white"
});
Also see: https://groups.google.com/forum/#!msg/fabricjs/fp19BLlqauw/a-smtqe5ms8J
You could write a function that accepts params and generates the path. Looks like fabric also has a static function in fabric.util.drawArc which you could use:
http://fabricjs.com/docs/fabric.util.html#drawArc

Canvas Shape having control points

I have made a Bezier Shape in kinetic js with control points on it vertices. the code allows the user to drag the starting, ending and control points thereby modifying the shape of the curve like shown below.
The link to the js fiddle containing the above code is http://jsfiddle.net/Lucy1/da90vct4/2/
Code for the anchor points is
var room = new Kinetic.Shape({
x: 0,
y: 0,
width: 100,
height: 100,
stroke: "black",
fill: 'ivory',
drawFunc: function (context) {
var x = this.x();
var y = this.y();
var w = this.width();
var h = this.height();
var trX = anchorTR.x();
var trY = anchorTR.y();
var brX = anchorBR.x();
var brY = anchorBR.y();
var blX = anchorBL.x();
var blY = anchorBL.y();
var tlX = anchorTL.x();
var tlY = anchorTL.y();
context.beginPath();
context.moveTo(tlX, tlY);
// top
context.bezierCurveTo(x + w / 3, y, x + w * 2 / 3, y, trX, trY);
// right
context.bezierCurveTo(x + w, y + h / 3, x + w, y + h * 2 / 3, brX, brY);
// bottom
context.bezierCurveTo(x + w * 2 / 3, y + h, x + w / 3, y + h, blX, blY);
// left
context.bezierCurveTo(x, y + h * 2 / 3, x, y + h / 3, tlX, tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
var anchorTR = new Kinetic.Circle({
x: 100,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTR);
var anchorBR = new Kinetic.Circle({
x: 100,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBR);
var anchorBL = new Kinetic.Circle({
x: 0,
y: 100,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorBL);
var anchorTL = new Kinetic.Circle({
x: 0,
y: 0,
radius: 8,
fill: "green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
g.add(anchorTL);
layer.draw();
Currently i'm defining multiple kinetic circles for the anchor points and multiple variables for positioning the anchor points.I'm trying to optimize the code in such a way that i can reuse the code multiple times without using loops but not being able to..Please help..
You can make the code reusable by encapsulating it into functions and adding some references.
Put the code that creates a group & room into a function and return the new room from that function.
Put the code that creates an anchor into a function and return the new anchor from that function.
Attach references to a room's anchors to the room node itself.
Here's a refactoring of the code and a Demo: http://jsfiddle.net/m1erickson/opsy1pn9/
<!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-v5.0.1.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 room1=makeRoom(50,50,50,50);
var room2=makeRoom(150,150,50,50);
function makeRoom(x,y,w,h){
var g=new Kinetic.Group({x:x,y:y,draggable:true});
layer.add(g);
var room=new Kinetic.Shape({
x:0,
y:0,
width:w,
height:h,
stroke:"blue",
fill: 'red',
drawFunc: function(context) {
var x=this.x();
var y=this.y();
var w=this.width();
var h=this.height();
var tlX=this.anchorTL.x();
var tlY=this.anchorTL.y();
context.beginPath();
context.moveTo(tlX,tlY);
// top
context.bezierCurveTo(x+w/3,y, x+w*2/3,y, this.anchorTR.x(),this.anchorTR.y());
// right
context.bezierCurveTo(x+w,y+h/3, x+w,y+h*2/3, this.anchorBR.x(),this.anchorBR.y());
// bottom
context.bezierCurveTo(x+w*2/3,y+h, x+w/3,y+h, this.anchorBL.x(),this.anchorBL.y());
// left
context.bezierCurveTo(x,y+h*2/3, x,y+h/3, tlX,tlY);
context.closePath();
context.fillStrokeShape(this);
}
});
g.add(room);
room.anchorTR=makeAnchor(w,0,g);
room.anchorBR=makeAnchor(w,h,g);
room.anchorBL=makeAnchor(0,h,g);
room.anchorTL=makeAnchor(0,0,g);
layer.draw();
}
function makeAnchor(x,y,group){
var anchor=new Kinetic.Circle({
x:x,
y:y,
radius:8,
fill:"green",
stroke: 'black',
strokeWidth: 1,
draggable: true
});
group.add(anchor);
anchor.moveToTop();
return(anchor);
}
}); // end $(function(){});
</script>
</head>
<body>
<h4>Drag green circle to change red rect</h4>
<div id="container"></div>
</body>
</html>

Categories

Resources