I have two series and their intersection point. I want to have an oval (ellipse) on a chart with center in intersection. Oval radiuses should be set in terms of axis units to show area of interest for each axis.
Highcharts.chart('container', {
series: [
// first series
{
name: 'IPR',
data: [[0, 30.5],[18.5, 25.4],[30, 19.4],[38, 9.7],[42, 0.02]]
},
// second series
{
name: 'VLP',
data: [[2, 0.5],[7, 1],[14, 6],[21, 22],[29, 29.6],[40, 30.3],[50, 27.2]]
},
// intersection
{
name: 'Operating point',
data: [
[22.42, 23.35]
]
}
],
})
How can I programmatically draw an oval in intersection and make zoom work?
You can use Renderer.createElement to create other SVG elements in Highcharts:
this.renderer.createElement('ellipse').attr({
cx: 60,
cy: 60,
rx: 50,
ry: 25,
'stroke-width': 2,
stroke: 'red',
fill: 'yellow',
zIndex: 3
}).add();
For translating to axis units use toPixels as #Anton Rybalko suggested.
Live demo: http://jsfiddle.net/kkulig/ds6aj5yp/
API references:
https://api.highcharts.com/class-reference/Highcharts.SVGRenderer#createElement
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/ellipse
https://api.highcharts.com/class-reference/Highcharts.Axis#toPixels
The SVG Renderer is not really a great answer.
The polygon feature should be used (with many points, which you can generate offline in a backend, or analytically in the front end):
series: [{
name: 'Target',
type: 'polygon',
data: [[153, 42], [149, 46], [149, 55], [152, 60], [159, 70], [170, 77], [180, 70],
[180, 60], [173, 52], [166, 45]],
color: Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0.5).get(),
enableMouseTracking: false
}
https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/polygon/
To draw a circle, line etc SVGRenderer can be used. But there is no method to draw an ellipse. However rect() with rounded corners can be used.
Following code can be used to draw an ellipse in point (100, 200) px, horizontal radius 20 px and vertical radius 10 px:
chart.renderer.rect(100, 100, 20, 10, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
zIndex: 0
})
.add();
To specify x, y and radiuses in terms of axis untits Axis.toPixels() can be used. If we need to convert point (22.42, 23.35) to pixels it can be done like:
var x = chart.xAxis[0].toPixels(22.42),
y = chart.yAxis[0].toPixels(23.35)
So function to draw an ellipse would be:
var drawEllipse = function(chart, x, y, xr, yr) {
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
$('.' + rectClass).remove()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'yellow',
'zIndex': 0
})
.add();
};
Finnaly redraw event can be used to redraw ellipse after zoom:
$(function() {
var drawEllipse = function(chart, x, y, xr, yr) {
// get pixel coordinates of rect
var x1 = chart.xAxis[0].toPixels(x-xr)
var x2 = chart.xAxis[0].toPixels(x+xr)
var y1 = chart.yAxis[0].toPixels(y-yr)
var y2 = chart.yAxis[0].toPixels(y+yr)
// remove previous ellipse
var rectClass = 'operating-point-ellipse'
$('.' + rectClass).remove()
// draw ellipse using rect()
chart.renderer.rect(x1, y2, x2 - x1, y1 - y2, '50%')
.attr({
'stroke-width': 1,
'stroke': 'green',
'fill': 'green',
'fill-opacity': 0.2,
'zIndex': 0
})
.addClass(rectClass)
.add();
};
$('#container').highcharts({
chart: {
events: {
redraw: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
},
load: function() {
drawEllipse(this, 22.42, 23.35, 6, 3);
}
}
},
//...
});
});
See full code on jsFiddle: http://jsfiddle.net/arybalko/rcct2r0b/
Related
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>
I'm struggling to implement a little things on canvas with KineticJS.
I want to create a circle + a line which form a group (plane).
The next step is to allow the group to rotate around itself with a button that appears when you click on the group.
My issue is that when I click on the rotate button, it does not rotate near the button but elsewhere. Have a look :
My rotation atm : http://hpics.li/b46b73a
I want the rotate button to be near the end of the line. Not far away..
I tried to implement it on jsfiddle but I'm kinda new and I didn't manage to put it correctly , if you could help me on that, I would be thankful !
http://jsfiddle.net/49nn0ydh/1/
function radians (degrees) {return degrees * (Math.PI/180)}
function degrees (radians) {return radians * (180/Math.PI)}
function angle (cx, cy, px, py) {var x = cx - px; var y = cy - py; return Math.atan2 (-y, -x)}
function distance (p1x, p1y, p2x, p2y) {return Math.sqrt (Math.pow ((p2x - p1x), 2) + Math.pow ((p2y - p1y), 2))}
jQuery (function(){
var stage = new Kinetic.Stage ({container: 'kineticDiv', width: 1200, height:600})
var layer = new Kinetic.Layer(); stage.add (layer)
// group avion1
var groupPlane1 = new Kinetic.Group ({
x: 150, y: 150,
draggable:true
}); layer.add (groupPlane1)
// avion 1
var plane1 = new Kinetic.Circle({
radius: 10,
stroke: "darkgreen",
strokeWidth: 3,
}); groupPlane1.add(plane1);
var trackPlane1 = new Kinetic.Line({
points: [10, 0, 110, 0],
stroke: "darkgreen",
strokeWidth: 2
}); groupPlane1.add(trackPlane1);
groupPlane1.on('click', function() {
controlGroup.show();
});
groupPlane1.setOffset (plane1.getWidth() * plane1.getScale().x / 2, plane1.getHeight() * plane1.getScale().y / 2)
var controlGroup = new Kinetic.Group ({
x: groupPlane1.getPosition().x + 120,
y: groupPlane1.getPosition().y ,
opacity: 1, draggable: true,
}); layer.add (controlGroup)
var signRect2 = new Kinetic.Rect({
x:-8,y: -6,
width: 20,
height: 20,
fill: 'white',
opacity:0
});
controlGroup.add(signRect2);
var sign = new Kinetic.Path({
x: -10, y: -10,
data: 'M12.582,9.551C3.251,16.237,0.921,29.021,7.08,38.564l-2.36,1.689l4.893,2.262l4.893,2.262l-0.568-5.36l-0.567-5.359l-2.365,1.694c-4.657-7.375-2.83-17.185,4.352-22.33c7.451-5.338,17.817-3.625,23.156,3.824c5.337,7.449,3.625,17.813-3.821,23.152l2.857,3.988c9.617-6.893,11.827-20.277,4.935-29.896C35.591,4.87,22.204,2.658,12.582,9.551z',
scale: {x:0.5, y:0.5}, fill: 'black'
}); controlGroup.add (sign)
controlGroup.setDragBoundFunc (function (pos) {
var groupPos = groupPlane1.getPosition();
var rotation = degrees (angle (groupPos.x, groupPos.y, pos.x, pos.y));
var dis = distance (groupPos.x, groupPos.y, pos.x, pos.y);
groupPlane1.setRotationDeg (rotation);
layer.draw()
return pos
})
controlGroup.on ('dragend', function() {
controlGroup.hide();
layer.draw()
})
controlGroup.hide();
layer.draw()
})
You can adjust the rotation point by setting the offsetX and offsetY of the group.
I am trying to draw a quarter circle using Kinetic JS. Unfortunately when I run the code below the shape drawn is actually a pie rather than an arc with two lines joining up to a centre point.
var arc = new Kinetic.Arc({
outerRadius: 80,
stroke: 'black',
strokeWidth: 5,
angle: 60,
rotationDeg: -120,
x:100,
y:100,
});
Does anyone know how I can draw just an arc without the addition of these two unwanted lines?
Fiddle: http://jsfiddle.net/GarryPas/55vYU/5/
Thanks in advance.
Just set the innerRadius to be the same as the outerRadius:
var arc = new Kinetic.Arc({
innerRadius: 80,
outerRadius: 80,
stroke: 'black',
strokeWidth: 5,
angle: 90,
rotationDeg: 0,
x:100,
y:100,
});
fiddle: http://jsfiddle.net/55vYU/6/
is there anyway to give the points of line with an array.
var line = new Kinetic.Line({
points : [{
x : line_points_x,
y : line_points_y
}],
stroke : 'black',
strokeWidth : 5,
lineCap : 'round'
});
I tried something but didn't work.I have 2 arrays that holds x and y points.
No. There are only 3 allowed structures.
[0,1,2,3], [[0,1],[2,3]] and [{x:0,y:1},{x:2,y:3}]
So you have to do something like this:
var points = [];
for(var i=0; i<line_points_x.length; i++) {
points.push( { x: line_points_x[i], y: line_points_y[i] } );
}
var line = new Kinetic.Line({
points: points,
stroke: 'black',
strokeWidth: 5,
lineCap: 'round'
});
I've got a animated circle which looks like this:
the blue part counts down, so for example from full to nothing in 10 seconds. The orange circle is just a circle. But I want that the circle will be smaller when you click on it. So i made an onclick event for the circle.
circleDraw.node.onclick = function () {
circleDraw.animate({
stroke: "#E0B6B2",
arc: [100, 100, 100, 100, 100]
}, 500);
circleDraw.toFront();
};
That works, i've made it for both of the circles, they both become smaller but, After the 500 mili seconds the blue circle becomes big again because the timer for the blue circle got the parameters that it should be bigger.
circleDraw.animate({
arc: [100, 100, 0, 100, 500]
}, 10000);
Because the blue circle counts for 10 seconds it becomes automatically bigger again. How do I make both circles smaller but keep the timer counting down?
I was thinking of stopping the animation for the blue circle and save the remaining mili seconds of the animation draw it again smaller and start the animation again with the remaining seconds, but I don't know how to do this. But maybe i'm looking in the wrong direction and do I have to make it different.
Thanks.
All my code:
/************************************************************************/
/* Raphael JS magic
*************************************************************************/
var drawTheCircleVector = function(xloc, yloc, value, total, R) {
var alpha = 360 / total * value,
a = (90 - alpha) * Math.PI / 180,
x = xloc + R * Math.cos(a),
y = yloc - R * Math.sin(a),
path;
if (total == value) {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
];
} else {
path = [
["M", xloc, yloc - R],
["A", R, R, 0, +(alpha > 180), 1, x, y]
];
}
return {
path: path
};
}; /************************************************************************/
/* Make the circles
*************************************************************************/
var timerCircle = Raphael("timer", 320, 320);
var circleBg = Raphael("backgroundCircle", 320, 320);
timerCircle.customAttributes.arc = drawTheCircleVector
circleBg.customAttributes.arc = drawTheCircleVector
/************************************************************************/
/* draw the circles
*************************************************************************/
var drawMe = circleBg.path().attr({
"fill": "#FF7F66",
"stroke": 0,
arc: [160, 160, 100, 100, 140]
});
var clickOnes = true;
drawMe.node.onclick = function() {
if (clickOnes == true) {
circleDraw.animate({
arc: [100, 100, 0, 100, 100]
}, 500);
circleDraw.toFront();
drawMe.animate({
arc: [100, 100, 100, 100, 100]
}, 500);
circleDraw.toFront();
clickOnes = false;
} else {
circleDraw.animate({
arc: [160, 160, 0, 100, 150]
}, 500);
circleDraw.toFront();
drawMe.animate({
arc: [160, 160, 100, 100, 140]
}, 500);
circleDraw.toFront();
clickOnes = true;
}
};
// arc: [Xposition, Yposition, how much 1 = begin 100 = end, ? = 100, 150];
/************************************************************************/
/* Draw the circle
*************************************************************************/
var circleDraw = timerCircle.path().attr({
"stroke": "#2185C5",
"stroke-width": 10,
arc: [160, 160, 100, 100, 150]
});
circleDraw.animate({
arc: [160, 160, 0, 100, 150]
}, 9000);
window.setInterval(function() {
goToNextStopGardensPointBus210()
}, 9000);
Here is my code the timer works and if you click on the circle it will become smaller but if you click on it before the bue cirlce is done it will become big again.
UPDATE
working version of what I got on jsFiddle,
http://jsfiddle.net/hgwd92/2S4Dm/
Here's a fiddle for you..
The issue was you where redrawing the items, with new animation speeds and such. Using the transform function, you can add a scaling transform that acts independent of the draws.
circleDraw.animate({transform: 'S0.5,0.5,160,160', 'stroke-width': 5}, 500);
and then to set it back...
circleDraw.animate({transform: 'S1,1,160,160', 'stroke-width': 10}, 500);
Note you need to set the center for the blue arc (the 160, 160), or once it gets past half way the center of the arc will move and it will scale to a different position.
EDIT: Updated the fiddle and code to scale the blue line to so it looks better.