What is the actual relation between points attribute and x,y coordinates of a Line object?
Say I want to draw a line from 10,10 to 100,10:
var line = new Kinetic.Line({
points: [10,10,100,10],
stroke: 'black',
strokeWidth: 3
});
Result is here: http://jsfiddle.net/4Y6MG/
But if I add x and y coordinates to the Line constructor the line is shifted:
var line = new Kinetic.Line({
points: [10,10,100,10],
stroke: 'black',
strokeWidth: 3,
x: 10,
y: 10
});
http://jsfiddle.net/qyfD2/1/
Why does it happen? I set x and y to be the same as the first values of points, that is I want the line to start at 10,10 precisely. Why does it move?
I know I'm missing something very basic here but I've just started playing with this canvas stuff.
For KineticJS your points array is internally altered by adding the current x or y to each value in the array:
points: [ 10+x, 10+y, 100+x ,10+y ],
Related
I am using Paper.js to create some shapes. It has worked great so far. One thing where I am stuck is variable stroke width. I want to stroke width to change between different points just like the color changes in gradients. Here is some code:
var firstSegment = new Segment({
point: [100, 50],
handleOut: [80, 100]
});
var secondSegment = new Segment({
point: [300, 50],
handleIn: [-80, -100]
});
var path = new Path({
segments: [firstSegment, secondSegment],
strokeColor: 'black',
strokeWidth: 4
});
In the above example, the strokeWidth is 4 everywhere along the path. How can I create a path such that it starts with a stroke width of 1px and then gets 6px wide at the other end?
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>
UPDATE
I managed to get trendline support added to the RGrah Line and Scatter charts. There's a demo in the download archive called demos/line-trendline.html that shows it. The Scatter chart supports trendlines too.
Assuming that I have the following values that I'm going to plot on a Line chart (these are values and not coordinates - the coordinates are calculated by my software and are shown below):
[4,4,3,2,5,5]
How would I turn those values into a set of trendline values/coordinates? (BTW I don't really have any Maths expertise beyond school level - so no fancy Maths terminology please!).
To add further details: These are a set of values that are spaced equally across a 500 pixel space (an HTML5 canvas tag). So the X coordinates are calculated for you and will come out like this (35 pixel margin on both sides of the chart): [35,121,207,293,379,465].
These are just the X coordinates, the Y coordinates are calculated automatically based on the scale, the height of the chart and the value. Here's an example Line chart that my software creates using this code:
<canvas id="cvs" width="500" height="250">
[No canvas support]
</canvas>
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,4,3,2,5,5],
options: {
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
shadow: false,
backgroundGridBorder: false,
backgroundGridVlines: false,
xaxis: false,
yaxis: false
}
}).draw()
</script>
You can see the chart online here:
https://www.rgraph.net/demos/line-csv-reader.html
And the X/Y coordinates (that are then plotted on the canvas tag) that are generated end up as this:
[[35,71],[121,71],[207,107],[293,143],[379,35],[465,35]]
So you already know:
the X coordinates are calculated for you ... (35 pixel margin): 35, 121, 207, 293, 379, 465.
the generated result:
[[35,71], [121,71], [207,107], [293,143], [379,35], [465,35]] that's just a list of [x,y] points
From that we can remove the X we know (calculated for us) and we will get:
71, 71, 107, 143, 35, 35
we can see a pattern with the original input
4, 4, 3, 2, 5, 5
piece of cake to get the formula with that sequence:
35 + (5 - y)*36
All that remains is to put that formula into code:
<canvas id="canvas"></canvas>
<script>
canvas = document.getElementById('canvas');
canvas.width = canvas.height = 500;
ctx = canvas.getContext('2d');
x = 35
trendline = []
plot = [4, 4, 3, 2, 5, 5]
plot.forEach(function(value) {
y = 35 + (5 - value) * 36
ctx.lineTo(x, y);
trendline.push([x, y])
x += 86
});
ctx.stroke();
console.log(JSON.stringify(trendline))
</script>
Now from what you mentioned on the comments:
it just plots the values that you give it ... It doesn't generate trend lines from your data
looking at the code of rgraph on the drawLine function:
https://www.rgraph.net/libraries/src/RGraph.line.js
// Loop thru each value given, plotting the line
// (FORMERLY FIRST)
for (i=0,len=lineData.length; i<len; i+=1) {
var data_point = lineData[i];
//
// Get the yPos for the given data point
//
var yPos = this.getYCoord(data_point);
...
//
// Add the coords to an array
//
this.coords.push([xPos, yPos]);
lineCoords.push([xPos, yPos]);
That lineCoords looks like a trendline to me...
I would like to draw a circle on a scatter plot to highlight values outside of the acceptable range.
I tried to use chart.renderer.circle but that uses the x and y pixels of the SVG element. I still want to be able to zoom in or out, so absolute x and y values don't work.
Is this possible with Highchart?
Edit:
Added Mockup:
Two ideas...
ONE
Use chart.renderer.circle and translate the point values to pixels.
Say you want to draw a circle at:
var circleX = 161.2; // x coordinate
var circleY = 51.6; // y coordinate
var circleR = 1.0; // radius size in terms of x axis distance
Draw the circle as:
function addCircle(chart){
if (this.circle){
// on a redraw, remove old circle
$(this.circle.element).remove();
}
// translate my coordinates to pixel values
var pixelX = chart.xAxis[0].toPixels(circleX);
var pixelY = chart.yAxis[0].toPixels(circleY);
var pixelR = chart.xAxis[0].toPixels(circleR) - chart.xAxis[0].toPixels(0);
// add my circle
this.circle = chart.renderer.circle(pixelX, pixelY, pixelR).attr({
fill: 'transparent',
stroke: 'black',
'stroke-width': 1
});
this.circle.add();
}
You then call this in the load and redraw events and all is awesome:
events: {
load: function(){
addCircle(this);
},
redraw: function(){
addCircle(this);
}
}
Here's a fiddle example.
TWO
Add the circle as another series, make the marker a giant transparent circle:
{
data: [[circleX, circleY]],
linkedTo: 'other', // link it to other series to avoid legend entry
marker: {
radius: 40,
lineColor: 'red',
fillColor: 'transparent',
lineWidth: 1,
symbol: 'circle'
}
}
Here's a fiddle for this one.
If a lot of my drawings are going to be within a particular area of my larger canvas (in this case, in the center), is there a way to just say that you're working within that particular 'sub-canvas' instead of having to add/subtract the margins every time you want to draw? It just makes my code look a lot more complicated every time I'm specifying coordinates.
You can change the coordinates' origin using translate().
First, save the original origin using save(). Then, find the origin that suits the centre of your screen's drawing area and call translate(x, y). Do your drawing, and then use restore() to get your previous origin back.
jsFiddle.
Kinetic.js, a popular library for Canvas allows you to create a Group layer. You can specify the x, y coordinates, height and width of this Group. You can also add shapes and draw other things within this group.
Here's and example:
var stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 200
});
var shapesLayer = new Kinetic.Layer();
/*
* create a group which will be used to combine
* multiple simple shapes. Transforming the group will
* transform all of the simple shapes together as
* one unit
*/
var group = new Kinetic.Group({
x: 220,
y: 40,
rotationDeg: 20
});
var colors = ['red', 'orange', 'yellow'];
for(var n = 0; n < 3; n++) {
// anonymous function to induce scope
(function() {
var i = n;
var box = new Kinetic.Rect({
x: i * 30,
y: i * 18,
width: 100,
height: 50,
name: colors[i],
fill: colors[i],
stroke: 'black',
strokeWidth: 4
});
group.add(box);
})();
}
shapesLayer.add(group);
stage.add(shapesLayer);
Here's a tutorial on how to add Groups
You can use drawimage to draw an offscreen canvas to a certain part of another canvas.
Create a new canvas object and draw all your stuff to that. In the end draw that canvas to your onscreen canvas with drawimage at some coordinates.