I want to draw many shapes, but don't know how to use the class array - list

paint shape 1, but paint shape 2 , shape 1 is clear ..
private void pictureBox1_MouseDown(object sender, MouseEventArgs e)
{
Ismousedown = true;
LocationXY = e.Location;
mousedownR = (int)(Math.Round(Math.Sqrt(Math.Pow(LocationXY.X - 250, 2) + Math.Pow(LocationXY.Y - 250, 2)), 2));
// label2.Text = mousedownstarAngle.ToString();
if (e.X >= 250)
{
gocanphal = (int)(270 - Math.Round(180 * -Math.Asin((e.Y - 250) / Math.Sqrt(Math.Pow(250 - e.X, 2) + Math.Pow(e.Y - 250, 2))) / Math.PI, 2));
}
if (e.X < 250)
{
gocanphal = (int)(90 + Math.Round(180 * (-Math.Asin((e.Y - 250) / Math.Sqrt(Math.Pow(250 - e.X, 2) + Math.Pow(e.Y - 250, 2)))) / Math.PI, 2));
}
}
private void pictureBox1_MouseMove(object sender, MouseEventArgs e)
{
if (Ismousedown == true)
{
LocationX1Y1 = e.Location;
if (e.X >= 250)
{
gocmo = (int)(270 - Math.Round(180 * -Math.Asin((LocationX1Y1.Y - 250) / Math.Sqrt(Math.Pow(250 - LocationX1Y1.X, 2) + Math.Pow(LocationX1Y1.Y - 250, 2))) / Math.PI, 2));
}
if (e.X < 250)
{
gocmo = (int)(90 + Math.Round(180 * -Math.Asin((LocationX1Y1.Y - 250) / Math.Sqrt(Math.Pow(250 - LocationX1Y1.X, 2) + Math.Pow(LocationX1Y1.Y - 250, 2))) / Math.PI, 2));
}
Refresh();
mouseupR = (int)(Math.Round(Math.Sqrt(Math.Pow(LocationX1Y1.X - 250, 2) + Math.Pow(LocationX1Y1.Y - 250, 2)), 2));
}
}
private void pictureBox1_MouseUp(object sender, MouseEventArgs e)
{
if (Ismousedown == true)
{
LocationX1Y1 = e.Location;
Ismousedown = false;
mouseupR = (int)(Math.Round(Math.Sqrt(Math.Pow(e.X - 250, 2) + Math.Pow(e.Y - 250, 2)), 2));
}
}
private void pictureBox1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawLine(penn, 250, 250, 250, 0);
var g = e.Graphics;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
var center = new Point(250, 250);
var innerR = mouseupR;// xa or gan diem dau
//var thickness = 30;// do day
var startAngle1 = gocanphal + 90;// diem bat dau
var arcLength1 = gocmo - gocanphal;// diem end
var outerR = mousedownR;
// var innerR = mousedownR - mouseupR;
var outerRect = new Rectangle
(center.X - outerR, center.Y - outerR, 2 * outerR, 2 * outerR);//center.Y - outerR
var innerRect = new Rectangle
(center.X - innerR, center.Y - innerR, 2 * innerR, 2 * innerR); // center.X - innerR
// using (var p = new GraphicsPath())
e.Graphics.FillEllipse(Brushes.White, 150, 150, 5, 5);
GraphicsPath p = new GraphicsPath();
p.AddArc(outerRect, startAngle1, arcLength1);
p.AddArc(innerRect, startAngle1 + arcLength1, -arcLength1);
p.CloseFigure();
g.DrawPath(Pens.Blue, p);
}
}
}
Want to draw more pictures and save

Related

Custom plugin to show tooltips, on hover

I have made a custom plugin to always show the tooltips since that was what I needed.
The only thing I would like to have now is a on-hover action.
const alwaysShowTooltipPlugin = {
id: 'alwaysShowTooltip',
onHover: function (evt, item, legend) {
console.log('hovered')
},
afterDraw(chart, args, options) {
const { ctx } = chart
ctx.save()
chart.data.datasets.forEach((dataset, i) => {
chart.getDatasetMeta(i).data.forEach((datapoint, index) => {
const { x, y } = datapoint.tooltipPosition();
const text = dataset.label
const textWidth = ctx.measureText(text).width
ctx.fillStyle = 'rgba(0, 0, 0, 0.8)'
ctx.fillRect(x - ((textWidth + 20) / 2), y - 40, textWidth + 20, 30)
// Triangle
ctx.beginPath()
ctx.moveTo(x, y )
ctx.lineTo(x - 5, y - 10)
ctx.lineTo(x + 5, y - 10)
ctx.fill()
ctx.restore()
// Text
ctx.font = '14px Arial'
ctx.fillStyle = 'white'
ctx.fillText(text, x - (textWidth / 2), y - 19)
ctx.restore()
})
})
},
}
How can I add a eventListener for a onClick so that I can use the data that was clicked on? The onHover I have currently does not work. It doesn't do anything at all.
I am using Nuxt by the way and Vue-ChartJS latest version.

emberjs -ember-cli-chart extend doughnut chart to create rounded edge

how do i extend chart object in ember-cli-cart ?? i want to extend dooughnut to have smooth edges and some other features too. something like the below code ,but i want to create as a reusable ember component
Chart.types.doughnut.extend({
draw: function (ease) {
var ctx = this.chart.chart.ctx;
var easingDecimal = ease || 1;
Chart.helpers.each(this.getDataset().metaData, function (arc, index) {
arc.transition(easingDecimal).draw();
var vm = arc._view;
var radius = (vm.outerRadius + vm.innerRadius) / 2;
var thickness = (vm.outerRadius - vm.innerRadius) / 2;
var angle = Math.PI - vm.endAngle - Math.PI / 2;
ctx.save();
ctx.fillStyle = vm.backgroundColor;
ctx.translate(vm.x, vm.y);
ctx.beginPath();
ctx.arc(radius * Math.sin(angle), radius * Math.cos(angle), thickness, 0, 2 * Math.PI);
ctx.arc(radius * Math.sin(Math.PI), radius * Math.cos(Math.PI), thickness, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
ctx.restore();
});
},
});

jsPlumb connecting raphael element's

I used raphael.js to draw some element's, and now I want to connect them,
how to connect raphael elements with jsplumb ?
For example, in the JSFiddle below : I'm trying to create connections between 2 circles, but I can't, because the circles have no id, my code .
i can't use this :
jsPlumb.connect({source:"id1", target:"id2"})
I finally found a solution to connect raphael elements with jsplumb, I want to thank Mr: # Simon Porritt (jsPlumb creator) for his help: the solution
jsPlumb.ready(function(){
jsPlumb.Defaults.Container = "drawing_board";
// Create a 480 x 640 canvas.
var paper = Raphael('drawing_board');
// of 90 pixels.
var circle1 = paper.circle(140, 110, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var circle2 = paper.circle(400, 180, 90).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var rect = paper.rect(50, 280, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var ellipse = paper.ellipse(300, 420, 90, 70).attr({ fill: '#3D6AA2', stroke: '#000000', 'stroke-width': 8 });
var offsetCalculators = {
"CIRCLE":function(el, parentOffset) {
var cx = parseInt(el.attr("cx"), 10),
cy = parseInt(el.attr("cy"), 10),
r = parseInt(el.attr("r"), 10);
return {
left: parentOffset.left + (cx - r),
top:parentOffset.top + (cy - r)
};
},
"ELLIPSE":function(el, parentOffset) {
var cx = parseInt(el.attr("cx"), 10),
cy = parseInt(el.attr("cy"), 10),
rx = parseInt(el.attr("rx"), 10),
ry = parseInt(el.attr("ry"), 10);
return {
left: parentOffset.left + (cx - rx),
top:parentOffset.top + (cy - ry)
};
},
"RECT":function(el, parentOffset) {
var x = parseInt(el.attr("x"), 10),
y = parseInt(el.attr("y"), 10);
return {
left: parentOffset.left + x,
top:parentOffset.top + y
};
}
};
var sizeCalculators = {
"CIRCLE":function(el) {
var r = parseInt(el.attr("r"), 10);
return [ r * 2, r * 2 ];
},
"ELLIPSE":function(el) {
var rx = parseInt(el.attr("rx"), 10),
ry = parseInt(el.attr("ry"), 10);
return [ rx * 2, ry * 2 ];
},
"RECT":function(el) {
var w = parseInt(el.attr("width"), 10),
h = parseInt(el.attr("height"), 10);
return [ w, h ];
}
};
jsPlumb.CurrentLibrary.getOffset = function(el) {
el = $(el);
var del = el[0], tn = del.tagName.toUpperCase();
if (offsetCalculators[tn]) {
var so = el.parent().offset();
return offsetCalculators[tn](el, so);
}
else
return el.offset();
};
jsPlumb.CurrentLibrary.getSize = function(el) {
el = $(el);
var del = el[0], tn = del.tagName.toUpperCase();
if (sizeCalculators[tn]) {
return sizeCalculators[tn](el);
}
else
return [ el.outerWidth(), el.outerHeight() ];
};
jsPlumb.connect({source:circle1.node, target:circle2.node, anchor:"Center", connector:"Straight"});
jsPlumb.connect({source:circle1.node, target:rect.node, anchors:["Center", "Top"], connector:"Straight"});
jsPlumb.connect({source:circle2.node, target:ellipse.node, anchor:"Center"});
//raphael draggable
var start = function () {
this.ox = this.attr("cx");
this.oy = this.attr("cy");
},
move = function (dx, dy) {
this.attr({cx: this.ox + dx, cy: this.oy + dy});
jsPlumb.repaint(this.node);
},
up = function () { };
paper.set(circle1, circle2).drag(move, start, up); });

line charts with different negative colors

Is it possible to have something like this with Jqplot or Google Visualizations
So far I was able to create something similar but not entirely what I want with jqplot
Code:
var style = {
seriesDefaults: {
fill: true,
fillToZero: true,
fillAndStroke: true,
color: "rgba(190,230,110, 0.8)",
fillColor: "rgba(206,236,145, 0.8)",
shadow: false,
lineWidth: 1,
rendererOptions: {
highlightMouseOver: false
}
},
seriesColors: ["#009900", "#000099", "#00cc00", "#0000cc"],
negativeSeriesColors: ["#bb0000", "#ffe700", "#dd0000"] };
You could do something like that in the Google Visualization API, but you would have to calculate the 0-line intersections for the line and add them in as data points, then split your data into two different series (one positive and one negative). These axis crossing points will become part of your data (they will spawn tooltips when you hover over them), but it otherwise meets your requirements:
function drawChart () {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addColumn('boolean', 'axis-crossing point');
var y = 0;
for (var x = 0; x < 100; x++) {
y += ~~(Math.random() * 5) * Math.pow(-1, ~~(Math.random() * 2));
if (y < -50) {
y += 5;
}
if (y > 50) {
y -= 5;
}
data.addRow([x, y, false]);
}
// parse the data looking for points where the data crosses the x-axis (at y = 0)
// work backwards because we will be adding new rows to the data set
var p1, p2, m, b, intersect;
for (var i = data.getNumberOfRows() - 1; i > 0; i--) {
p1 = {x: data.getValue(i - 1, 0), y: data.getValue(i - 1, 1)};
p2 = {x: data.getValue(i, 0), y: data.getValue(i, 1)};
if ((p1.y >= 0 && p2.y < 0) || (p1.y < 0 && p2.y >= 0)) {
m = (p2.y - p1.y) / (p2.x - p1.x);
b = p1.y - m * p1.x;
intersect = -1 * b / m;
data.insertRows(i, [
[intersect, p1.y, true],
[intersect, p2.y, true]
]);
}
}
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'Positive',
calc: function (dt, row) {
var y = dt.getValue(row, 1);
return data.getValue(row, 2) ? 0 : ((y >= 0) ? y : null);
}
}, {
type: 'number',
label: 'Negative',
calc: function (dt, row) {
var y = dt.getValue(row, 1);
return data.getValue(row, 2) ? 0 : ((y < 0) ? y : null);
}
}]);
var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
chart.draw(view, {
height: 400,
width: 600,
vAxis: {
viewWindow: {
min: -50,
max: 50
}
}
});
}
google.load('visualization', '1', {packages:['corechart'], callback: drawChart});
See working example: http://jsfiddle.net/asgallant/Qc869/

Raphael - Drawing shapes with mouse

What would be the best way to draw a rectangle or circle for that matter using your mouse ?
I just started looking at raphael and it seems I should use, drag? Or mousedown and mouseup ?
No sure.
I would use mousedown and mouseup events on your canvas/paper. On mouse down you should store the x and y positions of the mousedown, then on mouseup you should use the current mouse positions to calculate width and height.
Here is an example, bear in mind thought that I am using JQuery to calculate the mouse positions (if this is not available for you, then you should find another way to get the mouse offsets)
//global variables
var mouseDownX = 0;
var mouseDownY = 0;
//register events on document load
paper.mousedown(OnMouseDown);
paper.mouseup(OnMouseUp);
function OnMouseDown(e){
var offset = $("#Canvas").offset();//This is JQuery function
mouseDownX = e.pageX - offset.left;
mouseDownY = e.pageY - offset.top;
}
function OnMouseUp(e){
var offset = $("#Canvas").offset();//This is JQuery function
var upX = e.pageX - offset.left;
var upY = e.pageY - offset.top;
var width = upX - mouseDownX;
var height = upY - mouseDownY;
DrawRectangle(mouseDownX, mouseDownY, width, height);
}
function DrawRectangle(x, y, w, h){
var element = paper.rect(x, y, w, h);
element.attr({
fill: "#FFF",
stroke: "#F00"
});
}
Hope that helps
Here's an updated version of fiddle (mentioned in the other article) that works with Raphael 2+ (no paper events).
This fiddle shows how a rectangle is dynamically drawn while you drag the mouse.
var mouseDownX = 0;
var mouseDownY = 0;
var elemClicked;
var rect;
$(document).ready(function() {
var paper = Raphael("d1", 300, 200);
// start, move, and up are the drag functions
start = function() {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({
opacity: 1
});
if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
fill: "#000"
});
}, move = function(dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 200 || this.attr("x") > 300) this.attr({
x: this.ox + dx,
y: this.oy + dy
});
else {
nowX = Math.min(300, this.ox + dx);
nowY = Math.min(200, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({
x: nowX,
y: nowY
});
if (this.attr("fill") != "#000") this.attr({
fill: "#000"
});
}
}, up = function() {
// restoring state
this.attr({
opacity: .5
});
if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
fill: "#AEAEAE"
});
};
function DrawRectangle(x, y, w, h) {
var element = paper.rect(x, y, w, h);
element.attr({
fill: "gray",
opacity: .5,
stroke: "#F00"
});
$(element.node).attr('id', 'rct' + x + y);
console.log(element.attr('x'));
element.drag(move, start, up);
element.click(function(e) {
elemClicked = $(element.node).attr('id');
});
return element;
}
$("#bind").click(function(e) {
$('#d1').unbind('mousedown');
$('#d1').unbind('mousemove');
$('#d1').unbind('mouseup');
$("#d1").mousedown(function(e) {
// Prevent text edit cursor while dragging in webkit browsers
e.originalEvent.preventDefault();
var offset = $("#d1").offset();
mouseDownX = e.pageX - offset.left;
mouseDownY = e.pageY - offset.top;
rect = DrawRectangle(mouseDownX, mouseDownY, 0, 0);
$("#d1").mousemove(function(e) {
var offset = $("#d1").offset();
var upX = e.pageX - offset.left;
var upY = e.pageY - offset.top;
var width = upX - mouseDownX;
var height = upY - mouseDownY;
rect.attr( { "width": width > 0 ? width : 0,
"height": height > 0 ? height : 0 } );
});
});
$("#d1").mouseup(function(e) {
$('#d1').unbind('mousemove');
var BBox = rect.getBBox();
if ( BBox.width == 0 && BBox.height == 0 ) rect.remove();
});
});
$("#unbind").click(function(e) {
$('#d1').unbind('mouseup');
$('#d1').unbind('mousemove');
$('#d1').unbind('mousedown');
});
$("#clr").click(function(e) {
$('#d1').find('rect').each(function(i, obj) {
$(this).remove();
});
});
$("#del").click(function(e) {
$('#' + elemClicked).remove();
});
});
​
I have tried to modify the above fiddle from Miro. Please check my updated version here
var canvas = $('#canvas');
var paper = Raphael(canvas.attr('id'), canvas.width(), canvas.height());
var mouseDownX = 0;
var mouseDownY = 0;
var elemClicked;
var shap;
var borderColor = '#093';
var fillColor = '#eee';
var option = 1;
var shapOpacity = .5;
var ShapType = {RECTANGLE: 1, CIRCLE: 2, LINE: 3}
$(document).ready(function() {
$("#action").change(function() {
option = $('option:selected', this).val();
});
$("#start").click(function(e) {
reset();
$(canvas).mousedown(function(e) {
e.originalEvent.preventDefault();
var offset = $(canvas).offset();
mouseDownX = e.pageX - offset.left;
mouseDownY = e.pageY - offset.top;
if(option == ShapType.RECTANGLE){
shap = drawRectangle(mouseDownX, mouseDownY, 0, 0);
}
else if(option == ShapType.CIRCLE){
shap = drawCircle(mouseDownX, mouseDownY, mouseDownX, mouseDownY);
}else if(option == ShapType.LINE){
shap = drawLine(mouseDownX, mouseDownY, mouseDownX, mouseDownY);
}
$(canvas).mousemove(function(e) {
var offset = $(canvas).offset();
var upX = e.pageX - offset.left;
var upY = e.pageY - offset.top;
var width = upX - mouseDownX;
var height = upY - mouseDownY;
if(option == ShapType.RECTANGLE){
shap.attr( { "width": width > 0 ? width : 0,
"height": height > 0 ? height : 0 } );
}else if(option == ShapType.CIRCLE || option == ShapType.LINE){
shap.updateEnd(upX, upY);
}
}); // end mouse down.
});// end mouse down.
$(canvas).mouseup(function(e) {
$(canvas).unbind('mousemove');
if(option == ShapType.RECTANGLE){
var BBox = shap.getBBox();
if ( BBox.width == 0 && BBox.height == 0 ) shap.remove();
}
}); // end mouse up.
}); // end document ready.
$("#done").click(function(e) {
$(canvas).unbind('mouseup');
$(canvas).unbind('mousemove');
$(canvas).unbind('mousedown');
});
$("#clear").click(function(e) {
$(canvas).find('rect, circle, path').each(function(i, obj) {
$(this).remove();
});
});
$("#deleteshap").click(function(e) {
$('#' + elemClicked).remove();
});
var start = function() {
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({
opacity: shapOpacity
});
this.ow = this.attr('width');
this.oh = this.attr('height');
}
var move = function(dx, dy) {
nowX = Math.min(paper.width, this.ox + dx);
nowY = Math.min(paper.height, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({
x: nowX,
y: nowY
});
if (this.attr("fill") != fillColor) this.attr({
fill: fillColor
});
}
var up = function() {
this.attr({
opacity: shapOpacity
});
if (this.attr("y") < 60 && this.attr("x") < 60) this.attr({
fill: fillColor
});
};
var reset = function(){
$(canvas).unbind('mousedown');
$(canvas).unbind('mousemove');
$(canvas).unbind('mouseup');
}
function drawLine(startX, startY, endX, endY) {
var start = {
x: startX,
y: startY
};
var end = {
x: endX,
y: endY
};
var getPath = function() {
return "M" + start.x + " " + start.y + " L" + end.x + " " + end.y;
};
var redraw = function() {
node.attr("path", getPath());
node.attr({
stroke: borderColor
});
}
var node = paper.path(getPath());
$(node.node).attr('id', 'shap' + startX + startY);
node.click(function(e) {
elemClicked = $(node.node).attr('id');
});
return {
updateStart: function(x, y) {
start.x = x;
start.y = y;
redraw();
return this;
},
updateEnd: function(x, y) {
end.x = x;
end.y = y;
redraw();
return this;
}
};
};
function drawRectangle(x, y, w, h) {
var element = paper.rect(x, y, w, h);
element.attr({
fill: fillColor,
opacity: shapOpacity,
stroke: borderColor
});
$(element.node).attr('id', 'shap' + x + y);
element.drag(move, start, up);
element.click(function(e) {
elemClicked = $(element.node).attr('id');
});
return element;
}
function drawCircle(x1, y1, x2, y2)
{
var center = {
x: (x1+x2)/2,
y: (y1+y2)/2
};
var radius = {
h: Math.sqrt((y2 - y1) * (y2 - y1))/2,
w: Math.sqrt((x2 - x1) * (x2 - x1))/2
};
var getPath = function () {
return [["M", center.x, center.y], ["m", 0, -radius.h],
["a", radius.w, radius.h, 0, 1, 1, 0, 2 * radius.h],
["a", radius.w, radius.h, 0, 1, 1, 0, -2 * radius.h],
["z"]];
};
var redraw = function () {
node.attr("path", getPath());
node.attr(
{ fill: fillColor,
stroke: borderColor,
});
};
var node = paper.path(getPath());
$(node.node).attr('id', 'shap' + x1 + y1);
node.click(function(e) {
elemClicked = $(node.node).attr('id');
});
dragCircle(node);
return {
updateStart: function (x, y) {
center.x = (x1 + x) / 2;
center.y = (y1 + y) / 2;
radius.w = Math.sqrt((x - x1) * (x - x1))/2;
radius.h = Math.sqrt((y - y1) * (y - y1))/2;
redraw();
return this;
},
updateEnd: function (x, y) {
center.x = (x1 + x) / 2;
center.y = (y1 + y) / 2;
radius.w = Math.sqrt((x - x1) * (x - x1))/2;
radius.h = Math.sqrt((y - y1) * (y - y1))/2;
redraw();
return this;
}
};
} // end circle
dragCircle = function(node) {
var me = node,
lx = 0,
ly = 0,
ox = 0,
oy = 0,
moveFnc = function(dx, dy) {
lx = dx + ox;
ly = dy + oy;
me.transform('t' + lx + ',' + ly);
},
startFun = function() {},
endFnc = function() {
ox = lx;
oy = ly;
};
node.drag(moveFnc, function() {} , endFnc);
};
});
#canvas{background-color:#eee; background-size:cover; width:400px; height:300px;}
.controls input{background: #15A3D7;border: #eee 1px solid;border-radius: 3px;padding: 3px 12px;margin: 5px 3px;color: #fff;}
.controls select{padding: 3px;background: #eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
<input id="start" value="Start" type="button" />
<input id="done" value="Done" type="button" />
<input id="deleteshap" value="Delete Shap" type="button" />
<input id="clear" value="Clear All" type="button" />
<select id="action">
<option value="1">Rectangle</option>
<option value="2">Circle</option>
<option value="3">Line</option>
</select>
</div>
<div class="dvcls" id="canvas"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
Here is also a good reference to play with Raphael Js.
http://www.ebooksbucket.com/instant-raphaeljs-starter-b184
Hope this will help.