Related
I'm trying to identify the following parameters from the example for oval triangle but when i modify the line:
drawCircle(canvas.width / 3,canvas.height / 2,2.5,'red');
//want to replace with specific values but its not working
drawCircle(32 / 3,33 / 2,2.5,'red');
I want to identify the correct parameter so the demo can change the red point into other space inside the triangle
CH4= 20
C2H4= 70
C2H2= 20
Demo:
https://codepen.io/Barak/pen/WwdPxQ
I read the post from stackoverflow community and cannot see values
how to create Duval Triangle in canvas
In the post you've mentioned, markE did a great job replicating the look of a Duval triangle. The only problem is that the codepen including the drawCircle() function is just a dummy and does nothing more than placing a dot at an arbitrary position, given by it's x and y parameters.
To make this function show the correct position of actual data on the triangle - e.g. CH4=20 | C2H4=70 | C2H2=20 - there's a lot more involved.
Let's have a more in-depth look, if we were to solve this graphically on paper.
(The following is based on this paper)
The Duval triangle is basically an equilateral triangle like this, where side b=%CH4,
side a=%C2H4 and side c=%C2H2.
If we consider the following example data %CH4=25 | %C2H4=35 | %C2H2=40
we would have to go from point A to point C, 25% the length of side b and draw a line parallel to side c:
then from point C to point B, 35% the length of side a and draw a line parallel to side b:
and finally from point B to point A, 40% the length of side c and draw a line parallel to side a:
So where those three lines intersect - so the paper says - we have our target position indicating the status. This can be done programatically using plain trigonometry. Well, I'm not too sure why we need all three lines though. As th percentage for CH4 is always parallel to the triangle's base and C2H4 is always parallel to side b, we have an intersection yet and the line for C2H2 is given automatically.
Basically we just need a function which calculates the intersection between the CH4 and the C2H4 line.
I've taken markE's existing code and enhanced it by a function plotResult(), which takes three parameters for the CH4, C2H2 and C2H4 ppm values:
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// https://www.researchgate.net/publication/4345236_A_Software_Implementation_of_the_Duval_Triangle_Method
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
var v0 = {
x: 114,
y: 366
};
var v1 = {
x: 306,
y: 30
};
var v2 = {
x: 498,
y: 366
};
var triangle = [v0, v1, v2];
// Define all your segments here
var segments = [{
points: [{
x: 114,
y: 366
}, {
x: 281,
y: 76
}, {
x: 324,
y: 150
}, {
x: 201,
y: 366
}],
fill: 'rgb(172,236,222)',
label: {
text: 'D1',
cx: 200,
cy: 290,
withLine: false,
endX: null,
endY: null
},
},
{
points: [{
x: 385,
y: 366
}, {
x: 201,
y: 366
}, {
x: 324,
y: 150
}, {
x: 356,
y: 204
}, {
x: 321,
y: 256
}],
fill: 'deepskyblue',
label: {
text: 'D2',
cx: 290,
cy: 290,
withLine: false,
endX: null,
endY: null
},
},
{
points: [{
x: 297,
y: 46
}, {
x: 392,
y: 214
}, {
x: 372,
y: 248
}, {
x: 441,
y: 366
}, {
x: 385,
y: 366
}, {
x: 321,
y: 256
}, {
x: 356,
y: 204
}, {
x: 281,
y: 76
}],
fill: 'lightCyan',
label: {
text: 'DT',
cx: 370,
cy: 290,
withLine: false,
endX: 366,
endY: 120
},
},
{
points: [{
x: 306,
y: 30
}, {
x: 312,
y: 40
}, {
x: 300,
y: 40
}],
fill: 'black',
label: {
text: 'PD',
cx: 356,
cy: 40,
withLine: true,
endX: 321,
endY: 40
},
},
{
points: [{
x: 312,
y: 40
}, {
x: 348,
y: 103
}, {
x: 337,
y: 115
}, {
x: 297,
y: 46
}, {
x: 300,
y: 40
}],
fill: 'navajoWhite',
label: {
text: 'T1',
cx: 375,
cy: 70,
withLine: true,
endX: 340,
endY: 75
},
},
{
points: [{
x: 348,
y: 103
}, {
x: 402,
y: 199
}, {
x: 392,
y: 214
}, {
x: 337,
y: 115
}],
fill: 'tan',
label: {
text: 'T2',
cx: 400,
cy: 125,
withLine: true,
endX: 366,
endY: 120
},
},
{
points: [{
x: 402,
y: 199
}, {
x: 498,
y: 366
}, {
x: 441,
y: 366
}, {
x: 372,
y: 248
}],
fill: 'peru',
label: {
text: 'T3',
cx: 425,
cy: 290,
withLine: false,
endX: null,
endY: null
},
},
];
// label styles
var labelfontsize = 12;
var labelfontface = 'verdana';
var labelpadding = 3;
// pre-create a canvas-image of the arrowhead
var arrowheadLength = 10;
var arrowheadWidth = 8;
var arrowhead = document.createElement('canvas');
premakeArrowhead();
var legendTexts = ['PD = Partial Discharge', 'T1 = Thermal fault < 300 celcius', '...'];
// start drawing
/////////////////////
// draw colored segments inside triangle
for (var i = 0; i < segments.length; i++) {
drawSegment(segments[i]);
}
// draw ticklines
ticklines(v0, v1, 9, 0, 20);
ticklines(v1, v2, 9, Math.PI * 3 / 4, 20);
ticklines(v2, v0, 9, Math.PI * 5 / 4, 20);
// molecules
moleculeLabel(v0, v1, 100, Math.PI, '% CH4');
moleculeLabel(v1, v2, 100, 0, '% C2H4');
moleculeLabel(v2, v0, 75, Math.PI / 2, '% C2H2');
// draw outer triangle
drawTriangle(triangle);
// draw legend
drawLegend(legendTexts, 10, 10, 12.86);
plotResult(25, 40, 35);
// end drawing
/////////////////////
function drawSegment(s) {
// draw and fill the segment path
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var i = 1; i < s.points.length; i++) {
ctx.lineTo(s.points[i].x, s.points[i].y);
}
ctx.closePath();
ctx.fillStyle = s.fill;
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// draw segment's box label
if (s.label.withLine) {
lineBoxedLabel(s, labelfontsize, labelfontface, labelpadding);
} else {
boxedLabel(s, labelfontsize, labelfontface, labelpadding);
}
}
function moleculeLabel(start, end, offsetLength, angle, text) {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = '14px verdana';
var dx = end.x - start.x;
var dy = end.y - start.y;
var x0 = parseInt(start.x + dx * 0.50);
var y0 = parseInt(start.y + dy * 0.50);
var x1 = parseInt(x0 + offsetLength * Math.cos(angle));
var y1 = parseInt(y0 + offsetLength * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(text, x1, y1);
// arrow
var x0 = parseInt(start.x + dx * 0.35);
var y0 = parseInt(start.y + dy * 0.35);
var x1 = parseInt(x0 + 50 * Math.cos(angle));
var y1 = parseInt(y0 + 50 * Math.sin(angle));
var x2 = parseInt(start.x + dx * 0.65);
var y2 = parseInt(start.y + dy * 0.65);
var x3 = parseInt(x2 + 50 * Math.cos(angle));
var y3 = parseInt(y2 + 50 * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x3, y3);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
var angle = Math.atan2(dy, dx);
ctx.translate(x3, y3);
ctx.rotate(angle);
ctx.drawImage(arrowhead, -arrowheadLength, -arrowheadWidth / 2);
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
function boxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.lineWidth = 1;
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function lineBoxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
var lineToX = s.label.endX;
var lineToY = s.label.endY;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
// the line
ctx.beginPath();
ctx.moveTo(leftX, topY + textheight / 2);
ctx.lineTo(lineToX, topY + textheight / 2);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
// the boxed text
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function ticklines(start, end, count, angle, length) {
var dx = end.x - start.x;
var dy = end.y - start.y;
ctx.lineWidth = 1;
for (var i = 1; i < count; i++) {
var x0 = parseInt(start.x + dx * i / count);
var y0 = parseInt(start.y + dy * i / count);
var x1 = parseInt(x0 + length * Math.cos(angle));
var y1 = parseInt(y0 + length * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
if (i == 2 || i == 4 || i == 6 || i == 8) {
var labelOffset = length * 3 / 4;
var x1 = parseInt(x0 - labelOffset * Math.cos(angle));
var y1 = parseInt(y0 - labelOffset * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(parseInt(i * 10), x1, y1);
}
}
}
function premakeArrowhead() {
var actx = arrowhead.getContext('2d');
arrowhead.width = arrowheadLength;
arrowhead.height = arrowheadWidth;
actx.beginPath();
actx.moveTo(0, 0);
actx.lineTo(arrowheadLength, arrowheadWidth / 2);
actx.lineTo(0, arrowheadWidth);
actx.closePath();
actx.fillStyle = 'black';
actx.fill();
}
function drawTriangle(t) {
ctx.beginPath();
ctx.moveTo(t[0].x, t[0].y);
ctx.lineTo(t[1].x, t[1].y);
ctx.lineTo(t[2].x, t[2].y);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
function drawLegend(texts, x, y, lineheight) {
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = 'black';
ctx.font = '12px arial';
for (var i = 0; i < texts.length; i++) {
ctx.fillText(texts[i], x, y + i * lineheight);
}
}
function plotResult(val1, val2, val3) {
let deltaX, length;
let sum = val1 + val2 + val3;
const cos60 = Math.cos(Math.PI / 3);
const sin60 = Math.sin(Math.PI / 3);
let ch4 = val1 / sum;
let c2h2 = val2 / sum;
let c2h4 = val3 / sum;
length = Math.sqrt(Math.pow((v1.x - v0.x), 2) + Math.pow((v1.y - v0.y), 2));
let ch4PointA = new Point(v0.x + (length * ch4) * cos60, v0.y - (length * ch4) * sin60);
length = Math.sqrt(Math.pow((v2.x - v1.x), 2) + Math.pow((v2.y - v1.y), 2));
let ch4PointB = new Point(v2.x - (length * ch4) * cos60, v2.y - (length * ch4) * sin60);
length = Math.sqrt(Math.pow((v1.x - v2.x), 2) + Math.pow((v1.y - v2.y), 2));
let c2h4PointA = new Point(v1.x + (length * c2h4) * cos60, v1.y + (length * c2h4) * sin60);
deltaX = (v2.x - v0.x) * c2h4;
let c2h4PointB = new Point(v0.x + deltaX, v0.y);
let point = getIntersection(ch4PointA, ch4PointB, c2h4PointA, c2h4PointB);
ctx.beginPath();
ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI, false);
ctx.fillStyle = "red";
ctx.fill();
}
function getIntersection(pointA, pointB, pointC, pointD) {
let denominator, a, b, numeratorA, numeratorB;
denominator = ((pointD.y - pointC.y) * (pointB.x - pointA.x)) - ((pointD.x - pointC.x) * (pointB.y - pointA.y));
a = pointA.y - pointC.y;
b = pointA.x - pointC.x;
numeratorA = ((pointD.x - pointC.x) * a) - ((pointD.y - pointC.y) * b);
numeratorB = ((pointB.x - pointA.x) * a) - ((pointB.y - pointA.y) * b);
a = numeratorA / denominator;
b = numeratorB / denominator;
return new Point(pointA.x + (a * (pointB.x - pointA.x)), pointA.y + (a * (pointB.y - pointA.y)));
}
body {
background-color: ivory;
padding: 10px;
}
#canvas {
border: 1px solid red;
margin: 0 auto;
}
<canvas id="canvas" width=650 height=500></canvas>
I have a 2 points projection sketch based on two lines intersection algorithms.
For example, if there's a 3D point { x: -4, y: 2, z: -2 } and axes origin is pre-defined, I could find a = {x: -4, y: 2, z: 0} and b = {x: 0, y: 2, z: -2} points and find one possible intersection of line {vanishingPointX, a) and another line of {vanishingPointZ, b) and as you can see the code works fine.
And the task is to add another 3-rd point, so the output should like this:
it's a rough illustration, some lines are distorted.
I have tried to project Y values along X-axis, but anyway neither there's no algorithm of three lines intersection nor these three lines don't intersect together at one point.
And the last but not least, I am aware that this problem could be solved with matrices, however, I'm trying to do it calculus-free.
const scale = 64.0;
const far = 6.0;
const cube = [
{ x: 1.0, y: 1.0, z: 1.0 },
{ x: 1.0, y: -1.0, z: 1.0 },
{ x: -1.0, y: -1.0, z: 1.0 },
{ x: -1.0, y: 1.0, z: 1.0 },
{ x: 1.0, y: 1.0, z: -1.0 },
{ x: 1.0, y: -1.0, z: -1.0 },
{ x: -1.0, y: -1.0, z: -1.0 },
{ x: -1.0, y: 1.0, z: -1.0 },
];
const sides = [0, 1, 1, 2, 2, 3, 3, 0, 4, 5, 5, 6, 6, 7, 7, 4, 0, 4, 1, 5, 2, 6, 3, 7];
let vanishingPointZ = { x: -3.5, y: 2.0 };
let vanishingPointX = { x: 5.0, y: 2.0 };
let vanishingPointY = { x: 0.0, y: -6.0 };
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
let zero = { x: canvas.width / 2, y: canvas.height / 2 };
draw();
function draw(){
ctx.font = '32px serif';
ctx.fillStyle = "#0F0"
ctx.fillText('X', zero.x + vanishingPointX.x * scale + 16, zero.y + vanishingPointX.y * scale + 16);
ctx.fillStyle = "#F0F";
ctx.fillText('Y', zero.x + vanishingPointY.x * scale + 32, zero.y + vanishingPointY.y * scale + 16);
ctx.fillStyle = "#00F";
ctx.fillText('Z', zero.x + vanishingPointZ.x * scale - 32, zero.y + vanishingPointZ.y * scale + 16);
cube.forEach((p_, i_) =>{
project(p_);
let pos = { x: zero.x + p_.dx * scale, y: zero.y + p_.dy * scale };
//to x
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointX.x * scale, zero.y + vanishingPointX.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(0, 255, 0, 0.33)";
ctx.stroke();
//to z
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointZ.x * scale, zero.y + vanishingPointZ.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(0, 0, 255, 0.33)";
ctx.stroke();
//to upper y
//to x
ctx.beginPath();
ctx.moveTo(zero.x + vanishingPointY.x * scale, zero.y + vanishingPointY.y * scale);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.strokeStyle = "rgba(255, 0, 255, 0.33)";
ctx.stroke();
ctx.beginPath();
ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
ctx.closePath();
ctx.fillStyle = "#DEDEDE";
ctx.fill();
})
for(let i = 0; i < sides.length; i += 2){
ctx.beginPath();
ctx.moveTo(zero.x + cube[sides[i]].dx * scale, zero.y + cube[sides[i]].dy * scale);
ctx.lineTo(zero.x + cube[sides[i + 1]].dx * scale, zero.y + cube[sides[i + 1]].dy * scale);
ctx.closePath();
ctx.strokeStyle = "#000";
ctx.stroke();
}
}
function project(p_){
let distX = Math.sqrt(Math.pow(vanishingPointX.x, 2), Math.pow(vanishingPointX.y - p_.y, 2));
let vx = { x: vanishingPointX.x, y: vanishingPointX.y - p_.y };
let nx = Math.exp( p_.x / far );
vx.x *= nx;
vx.y *= nx;
let x = { x: vanishingPointX.x - vx.x, y: vanishingPointX.y - vx.y };
let distZ = Math.sqrt(Math.pow(vanishingPointZ.x, 2), Math.pow(vanishingPointZ.y - p_.y, 2));
let vz = { x: vanishingPointZ.x, y: vanishingPointZ.y - p_.y };
let nz = Math.exp( p_.z / far );
vz.x *= nz;
vz.y *= nz;
let z = { x: vanishingPointZ.x - vz.x, y: vanishingPointZ.y - vz.y };
let out = twoLinesIntersection(vanishingPointZ, z, vanishingPointX, x);
//trying to calculate y projection and it seems that as standalone it work fine
let distY = Math.sqrt(Math.pow(vanishingPointY.x, 2), Math.pow(vanishingPointX.y - p_.x, 2));
let vy = { x: vanishingPointY.y, y: vanishingPointY.y - p_.x };
let ny = Math.exp( p_.y / far );
vy.x *= ny;
vy.y *= ny;
let y = { x: vanishingPointY.x - vy.x, y: vanishingPointY.y - vy.y };
p_.dx = out.x;
p_.dy = out.y;
}
function twoLinesIntersection(p1_, p4_, p3_, p2_){
let d1 = (p1_.x - p2_.x) * (p3_.y - p4_.y);
let d2 = (p1_.y - p2_.y) * (p3_.x - p4_.x);
let d = (d1) - (d2);
let u1 = (p1_.x * p2_.y - p1_.y * p2_.x);
let u4 = (p3_.x * p4_.y - p3_.y * p4_.x);
let u2x = p3_.x - p4_.x;
let u3x = p1_.x - p2_.x;
let u2y = p3_.y - p4_.y;
let u3y = p1_.y - p2_.y;
return { x: (u1 * u2x - u3x * u4) / d, y: (u1 * u2y - u3y * u4) / d };
}
body { margin: 0; }
<canvas id='canvas' width='800' height='800'></canvas>
We can make this easier to compute by, rather than adding vector compounds to a start coordinate until we're at the "real" coordinate, treating the problem as one of line intersections. For example, if we want the point XYZ = (1,2,2) we can find it using line intersections by following this visual "recipe":
For any 3D point we can first compute the points on the YZ and XY planes, after which we can find the true point with one more line intersection. This does rely on knowing where on the screen our origin can be found (we could pick a point in the middle of the triangle Z-Y-X, but whatever screen point we pick, let's call that C, after which the code looks like this:
function get(x, y, z) {
if (x===0 && y===0 && z===0) return C;
// Get the points at the distances along our Z and X axes:
const px = lerp(C, X, perspectiveMap(x));
const pz = lerp(C, Z, perspectiveMap(z));
// If our 3D coordinate lies on the XZ plane, then this
// is just a matter of finding the line/line intersection:
if (y==0) return twoLinesIntersection(X, pz, Z, px);
// If it's not, we construct the two points on the YZ and XY planes:
const py = lerp(C, Y, perspectiveMap(y));
const YZ = twoLinesIntersection(Y, pz, Z, py);
const XY = twoLinesIntersection(Y, px, X, py);
// And then the 3D coordinate is a line/line intersection with those.
return twoLinesIntersection(XY, Z, X, YZ);
}
function lerp(v1, v2, r) {
const mr = 1 - r;
return {
x: v1.x * mr + v2.x * r,
y: v1.y * mr + v2.y * r,
z: v1.z * mr + v2.z * r,
};
}
With the perspective mapping function turns a value on the axis into a distance ratio between the origin and the axis' vanishing point. What that function looks like is effectively up to you, but if we want straight lines to stay straight, we'll want a rational perspective function:
const DEFAULT_PERSPECTIVE_STRENGTH = 0.3;
function perspectiveMap(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
return 1 - 1/(1 + value * strength);
}
(we computer "1 minus..." because as a ratio between the origin and a vanishing point, we want this value to be 0 at x/y/z=0, so that lerp(origin, vanishingPoint, value) yields the origin, and we want it to become 1 as x/y/z approach infinity. Just on its own, 1/(1+v*s) does the exact opposite of that, so subtracting it from one "flips" it around)
Implemented as a snippet:
const w = 600, h = 300;
perspective.width = w;
perspective.height = h;
const DEFAULT_PERSPECTIVE_STRENGTH = 0.2;
const ctx = perspective.getContext("2d");
// our vanishing points and origin
let Z = { x: w*0.05, y: h*0.85 };
let X = { x: w*0.92, y: h*0.95 };
let Y = { x: w*0.65, y: h*0.1 };
let C = { x: w*0.65, y: h*0.50 };
// draw our "grid" and labels
line(X,C);
line(Y,C);
line(Z,C);
ctx.strokeStyle = `#00000020`;
drawGrid(10);
ctx.fillStyle = `#400`;
text("X", X, 10, 0);
text("Z", Z, -10, 0);
text("Y", Y, 0, -5);
// draw a 2x2x2 cube
ctx.strokeStyle = `#000000`;
drawCube(2);
// ------------ functions for content ------------
function drawGrid(e) {
for(let i=0; i<e; i++) {
line(X, get(0,i,0));
line(X, get(0,0,i));
line(Y, get(i,0,0));
line(Y, get(0,0,i));
line(Z, get(i,0,0));
line(Z, get(0,i,0));
}
}
function drawCube(n) {
const cube = getCube(n);
const [p1,p2,p3,p4,p5,p6,p7,p8] = cube.map(p => get(p));
quad(p1,p2,p3,p4);
quad(p5,p6,p7,p8);
line(p1,p5);
line(p2,p6);
line(p3,p7);
line(p4,p8);
}
function getCube(n) {
return [
{x: n, y: n, z: n},
{x: 0, y: n, z: n},
{x: 0, y: n, z: 0},
{x: n, y: n, z: 0},
{x: n, y: 0, z: n},
{x: 0, y: 0, z: n},
{x: 0, y: 0, z: 0},
{x: n, y: 0, z: 0},
];
}
// ------------ some draw util functions ------------
function line(p1, p2) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
}
function quad(p1, p2, p3, p4) {
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.lineTo(p4.x, p4.y);
ctx.closePath();
ctx.stroke();
}
function text(str, point, ox=0, oy=0) {
const { x, y } = point;
ctx.fillText(str, x+ox, y+oy);
}
// ------------ and: our coordinate computer ------------
function get(x,y,z) {
if (y === undefined) {
z = x.z;
y = x.y;
x = x.x
}
if (x===0 && y===0 && z===0) return C;
const px = lerp(C, X, map(x));
const pz = lerp(C, Z, map(z));
if (y==0) return lli(X, pz, Z, px);
const py = lerp(C, Y, map(y));
const YZ = lli(Y, pz, Z, py);
const XY = lli(Y, px, X, py);
return lli(XY, Z, X, YZ);
}
function lerp(v1, v2, r) {
const mr = 1 - r;
return {
x: v1.x * mr + v2.x * r,
y: v1.y * mr + v2.y * r,
z: v1.z * mr + v2.z * r
}
}
function lli(p1,p2,p3,p4) {
return lli8(p1.x,p1.y,p2.x,p2.y,p3.x,p3.y,p4.x,p4.y);
}
function lli8(x1,y1,x2,y2,x3,y3,x4,y4) {
const d = (x1-x2)*(y3-y4) - (y1-y2)*(x3-x4);
if (d === 0) return undefined;
const f12 = (x1*y2 - y1*x2);
const f34 = (x3*y4 - y3*x4);
const nx = f12*(x3-x4) - (x1-x2)*f34;
const ny = f12*(y3-y4) - (y1-y2)*f34;
return { x: nx/d, y: ny/d };
}
function map(value, strength=DEFAULT_PERSPECTIVE_STRENGTH) {
return 1 - 1/(1 + value*strength);
}
canvas { border: 1px solid black; }
<canvas id="perspective">
I want to draw an line arrow in my canvas aria clicking a button
<button style="margin-left: 0" class="btn btn-info btn-sm" id="line-shape-arrows"> <i class="fa fa-long-arrow-right"></i> 矢印 </button>
I was done that using simple technique. I draw a Line than draw a Triangle after that have group Line and Triangle objects
$("#line-shape-arrows").on("click", function(event){
event.preventDefault();
var triangle = new fabric.Triangle({
width: 10,
height: 15,
fill: 'red',
left: 235,
top: 65,
angle: 90
});
var line = new fabric.Line([50, 100, 200, 100], {
left: 75,
top: 70,
stroke: 'red'
});
var objs = [line, triangle];
var alltogetherObj = new fabric.Group(objs);
canvas.add(alltogetherObj);
});
Below code is worked for me
var fromx, fromy, tox, toy;
this.canvas.on('mouse:down', function (event) {
var pointer = this.canvas.getPointer(event.e);
fromx = pointer.x;
fromy = pointer.y;
});
this.canvas.on('mouse:up', function (event) {
var pointer = this.canvas.getPointer(event.e);
tox = pointer.x;
toy = pointer.y;
//this.drawArrow(startX, startY, endX, endY);
var angle = Math.atan2(toy - fromy, tox - fromx);
var headlen = 10; // arrow head size
// bring the line end back some to account for arrow head.
tox = tox - (headlen) * Math.cos(angle);
toy = toy - (headlen) * Math.sin(angle);
// calculate the points.
var points = [
{
x: fromx, // start point
y: fromy
}, {
x: fromx - (headlen / 4) * Math.cos(angle - Math.PI / 2),
y: fromy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
},{
x: tox - (headlen / 4) * Math.cos(angle - Math.PI / 2),
y: toy - (headlen / 4) * Math.sin(angle - Math.PI / 2)
}, {
x: tox - (headlen) * Math.cos(angle - Math.PI / 2),
y: toy - (headlen) * Math.sin(angle - Math.PI / 2)
},{
x: tox + (headlen) * Math.cos(angle), // tip
y: toy + (headlen) * Math.sin(angle)
}, {
x: tox - (headlen) * Math.cos(angle + Math.PI / 2),
y: toy - (headlen) * Math.sin(angle + Math.PI / 2)
}, {
x: tox - (headlen / 4) * Math.cos(angle + Math.PI / 2),
y: toy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
}, {
x: fromx - (headlen / 4) * Math.cos(angle + Math.PI / 2),
y: fromy - (headlen / 4) * Math.sin(angle + Math.PI / 2)
},{
x: fromx,
y: fromy
}
];
var pline = new fabric.Polyline(points, {
fill: color, //'white',
stroke: color, //'black',
opacity: 1,
strokeWidth: 1,
originX: 'left',
originY: 'top',
selectable: true
});
this.add(pline);
this.isDown = false;
this.off('mouse:down').off('mouse:move').off('mouse:up')
this.renderAll();
});
I have a code in canvas which help me in making gas triangles(duval triangles).
I need to convert the code from canvas to svg.
One of the reason why I moving from canvas to svg, is because I can't add event handlers in canvas(which act like bitmap) but in svg I can do it.
1.Is it possible?
2.Can I do the same things in canvas also in svg?
3.Should I use libraries to help me in writing svg, any recommendations for specific svg library?
My code is based on the following post:
how to create Duval Triangle in canvas
$(function() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
// https://www.researchgate.net/publication/4345236_A_Software_Implementation_of_the_Duval_Triangle_Method
var v0 = {
x: 58,
y: 845
};
var v1 = {
x: 984,
y: 845
};
var v2 = {
x: 521,
y: 41
};
var triangle = [v0, v1, v2];
// Define all your segments here
var segments = [{
points: [{
x: 58,
y: 845
}, {
x: 272,
y: 845
}, {
x: 567,
y: 333
}, {
x: 461,
y: 150
}],
fill: 'rgb(172,236,222)',
label: {
text: 'D1',
cx: 300,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, {
points: [{
x: 272,
y: 845
}, {
x: 567,
y: 333
}, {
x: 646,
y: 468
}, {
x: 572,
y: 597
}, {
x: 716,
y: 845
}],
fill: 'deepskyblue',
label: {
text: 'D2',
cx: 490,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, {
points: [{
x: 716,
y: 845
}, {
x: 845,
y: 845
}, {
x: 683,
y: 565
}, {
x: 734,
y: 476
}, {
x: 503,
y: 76
}, {
x: 461,
y: 150
}, {
x: 646,
y: 468
}, {
x: 572,
y: 595
}],
fill: 'lightCyan',
label: {
text: 'DT',
cx: 656,
cy: 645,
withLine: false,
endX: 366,
endY: 120
},
}, { //here - I am in hell.-s5
points: [{
x: 530,
y: 59
}, {
x: 512,
y: 59
}, {
x: 521,
y: 41
}],
fill: 'black',
label: {
text: 'PD',
cx: 600,
cy: 52,
withLine: true,
endX: 520,
endY: 70
},
}, {
points: [{
x: 595,
y: 235
}, {
x: 614,
y: 203
}, {
x: 530,
y: 59
}, {
x: 512,
y: 59
}, {
x: 503,
y: 76
}],
fill: 'navajoWhite',
label: {
text: 'T1',
cx: 670,
cy: 140,
withLine: true,
endX: 574,
endY: 105
},
}, {
points: [{
x: 753,
y: 446
}, {
x: 735,
y: 476
}, {
x: 595,
y: 235
}, {
x: 614,
y: 203
}],
fill: 'tan',
label: {
text: 'T2',
cx: 800,
cy: 290,
withLine: true,
endX: 662,
endY: 120
},
}, {
points: [{
x: 845,
y: 845
}, {
x: 683,
y: 565
}, {
x: 753,
y: 446
}, {
x: 984,
y: 845
}],
fill: 'peru',
label: {
text: 'T3',
cx: 800,
cy: 645,
withLine: false,
endX: null,
endY: null
},
}, ];
// label styles
var labelfontsize = 12;
var labelfontface = 'verdana';
var labelpadding = 3;
// pre-create a canvas-image of the arrowhead
var arrowheadLength = 10;
var arrowheadWidth = 8;
var arrowhead = document.createElement('canvas');
premakeArrowhead();
var legendTexts = ['PD = Partial Discharge',
'DT = Discharges and Thermal',
'T1 = Thermal fault T < 300 ℃',
'T2 = Thermal fault 300 ℃ < T < 700 ℃',
'T3 = Thermal fault T > 700 ℃',
'D1 = Discharges of low energy',
'D2 = Discharges of high energy'
];
// start drawing
/////////////////////
// draw colored segments inside triangle
for (var i = 0; i < segments.length; i++) {
drawSegment(segments[i]);
}
// draw ticklines
ticklines(v0, v1, 9, Math.PI * 1.2, 20);
ticklines(v1, v2, 9, Math.PI * 3 / 4, 20);
ticklines(v2, v0, 9, Math.PI * 2, 20);
// molecules
moleculeLabel(v0, v1, 100, Math.PI / 2, '% CH4');
moleculeLabel(v1, v2, 100, 0, '% C2H4');
moleculeLabel(v2, v0, 100, Math.PI, '% C2H2');
// draw outer triangle
drawTriangle(triangle);
// draw legend
drawLegend(legendTexts, 10, 10, 12.86);
drawCircle(canvas.width / 3, canvas.height / 2, 2.5, 'red');
// end drawing
/////////////////////
function drawCircle(point1, point2, radius, color) {
ctx.beginPath();
ctx.arc(point1, point2, radius, 0, 2 * Math.PI, false);
ctx.fillStyle = color;
ctx.fill();
}
function drawSegment(s) {
// draw and fill the segment path
ctx.beginPath();
ctx.moveTo(s.points[0].x, s.points[0].y);
for (var i = 1; i < s.points.length; i++) {
ctx.lineTo(s.points[i].x, s.points[i].y);
}
ctx.closePath();
ctx.fillStyle = s.fill;
ctx.fill();
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.stroke();
// draw segment's box label
if (s.label.withLine) {
lineBoxedLabel(s, labelfontsize, labelfontface, labelpadding);
} else {
boxedLabel(s, labelfontsize, labelfontface, labelpadding);
}
}
function moleculeLabel(start, end, offsetLength, angle, text) {
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = '14px verdana';
var dx = end.x - start.x;
var dy = end.y - start.y;
var x0 = parseInt(start.x + dx * 0.50);
var y0 = parseInt(start.y + dy * 0.50);
var x1 = parseInt(x0 + offsetLength * Math.cos(angle));
var y1 = parseInt(y0 + offsetLength * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(text, x1, y1);
// arrow
var x0 = parseInt(start.x + dx * 0.35);
var y0 = parseInt(start.y + dy * 0.35);
var x1 = parseInt(x0 + 50 * Math.cos(angle));
var y1 = parseInt(y0 + 50 * Math.sin(angle));
var x2 = parseInt(start.x + dx * 0.65);
var y2 = parseInt(start.y + dy * 0.65);
var x3 = parseInt(x2 + 50 * Math.cos(angle));
var y3 = parseInt(y2 + 50 * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x1, y1);
ctx.lineTo(x3, y3);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
var angle = Math.atan2(dy, dx);
ctx.save(); // save
ctx.translate(x3, y3);
ctx.rotate(angle);
ctx.drawImage(arrowhead, -arrowheadLength, -arrowheadWidth / 2);
ctx.restore()
}
function boxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.lineWidth = 1;
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function lineBoxedLabel(s, fontsize, fontface, padding) {
var centerX = s.label.cx;
var centerY = s.label.cy;
var text = s.label.text;
var lineToX = s.label.endX;
var lineToY = s.label.endY;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle'
ctx.font = fontsize + 'px ' + fontface
var textwidth = ctx.measureText(text).width;
var textheight = fontsize * 1.286;
var leftX = centerX - textwidth / 2 - padding;
var topY = centerY - textheight / 2 - padding;
// the line
ctx.beginPath();
ctx.moveTo(leftX, topY + textheight / 2);
ctx.lineTo(lineToX, topY + textheight / 2);
ctx.strokeStyle = 'black';
ctx.lineWidth = 1;
ctx.stroke();
// the boxed text
ctx.fillStyle = 'white';
ctx.fillRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.strokeRect(leftX, topY, textwidth + padding * 2, textheight + padding * 2);
ctx.fillStyle = 'black';
ctx.fillText(text, centerX, centerY);
}
function ticklines(start, end, count, angle, length) {
var dx = end.x - start.x;
var dy = end.y - start.y;
ctx.lineWidth = 1;
for (var i = 1; i < count; i++) {
var x0 = parseInt(start.x + dx * i / count);
var y0 = parseInt(start.y + dy * i / count);
var x1 = parseInt(x0 + length * Math.cos(angle));
var y1 = parseInt(y0 + length * Math.sin(angle));
ctx.beginPath();
ctx.moveTo(x0, y0);
ctx.lineTo(x1, y1);
ctx.stroke();
if (i == 2 || i == 4 || i == 6 || i == 8) {
var labelOffset = length * 3 / 4;
var x1 = parseInt(x0 - labelOffset * Math.cos(angle));
var y1 = parseInt(y0 - labelOffset * Math.sin(angle));
ctx.fillStyle = 'black';
ctx.fillText(parseInt(i * 10), x1, y1);
}
}
}
function premakeArrowhead() {
var actx = arrowhead.getContext('2d');
arrowhead.width = arrowheadLength;
arrowhead.height = arrowheadWidth;
actx.beginPath();
actx.moveTo(0, 0);
actx.lineTo(arrowheadLength, arrowheadWidth / 2);
actx.lineTo(0, arrowheadWidth);
actx.closePath();
actx.fillStyle = 'black';
actx.fill();
}
function drawTriangle(t) {
ctx.beginPath();
ctx.moveTo(t[0].x, t[0].y);
ctx.lineTo(t[1].x, t[1].y);
ctx.lineTo(t[2].x, t[2].y);
ctx.closePath();
ctx.strokeStyle = 'black';
ctx.lineWidth = 2;
ctx.stroke();
}
function drawLegend(texts, x, y, lineheight) {
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillStyle = 'black';
ctx.font = '12px arial';
for (var i = 0; i < texts.length; i++) {
ctx.fillText(texts[i], x, y + i * lineheight);
}
}
})
body {
background-color: ivory;
padding: 10px;
}
#canvas {
border: 1px solid red;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width=1024 height=1020></canvas>
Yes it is possible.
You can do more things on svg than on canvas.
You can try SVG.JS library. It is lightweight and easy to use.
Try fabric JS to convert canvas to svg. JsFiddle
HTML
<canvas id="canvas" width=1024 height=1020></canvas>
<button id="canvas2svg">Canvas 2 SVG</button>
JS
var canvas = new fabric.Canvas('canvas', { isDrawingMode: true });
//var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
$("#canvas2svg").click(function(){
canvas.isDrawingMode = false;
alert(canvas.toSVG());
});
JsFiddle
Also refer this example fiddle
I am working on a radial control similar to the HTML5 wheel of fortune example. I've modified the original here with an example of some additional functionality I require: http://jsfiddle.net/fEm9P/ When you click on the inner kinetic wedges they will shrink and expand within the larger wedges. Unfortunately when I rotate the wheel it lags behind the pointer. It's not too bad here but it's really noticeable on a mobile.
I know this is due to the fact that I'm not caching the wheel. When I do cache the wheel (uncomment lines 239-249) the inner wedges no longer respond to mouse/touch but the response on rotation is perfect. I have also tried adding the inner wedges to a separate layer and caching the main wheel only. I then rotate the inner wheel with the outer one. Doing it this way is a little better but still not viable on mobile.
Any suggestions would be greatly appreciated.
Stephen
//constants
var MAX_ANGULAR_VELOCITY = 360 * 5;
var NUM_WEDGES = 25;
var WHEEL_RADIUS = 410;
var ANGULAR_FRICTION = 0.2;
// globals
var angularVelocity = 360;
var lastRotation = 0;
var controlled = false;
var target, activeWedge, stage, layer, wheel,
pointer, pointerTween, startRotation, startX, startY;
var currentVolume, action;
function purifyColor(color) {
var randIndex = Math.round(Math.random() * 3);
color[randIndex] = 0;
return color;
}
function getRandomColor() {
var r = 100 + Math.round(Math.random() * 55);
var g = 100 + Math.round(Math.random() * 55);
var b = 100 + Math.round(Math.random() * 55);
var color = [r, g, b];
color = purifyColor(color);
color = purifyColor(color);
return color;
}
function bind() {
wheel.on('mousedown', function(evt) {
var mousePos = stage.getPointerPosition();
angularVelocity = 0;
controlled = true;
target = evt.targetNode;
startRotation = this.rotation();
startX = mousePos.x;
startY = mousePos.y;
});
// add listeners to container
document.body.addEventListener('mouseup', function() {
controlled = false;
action = null;
if(angularVelocity > MAX_ANGULAR_VELOCITY) {
angularVelocity = MAX_ANGULAR_VELOCITY;
}
else if(angularVelocity < -1 * MAX_ANGULAR_VELOCITY) {
angularVelocity = -1 * MAX_ANGULAR_VELOCITY;
}
angularVelocities = [];
}, false);
document.body.addEventListener('mousemove', function(evt) {
var mousePos = stage.getPointerPosition();
var x1, y1;
if(action == 'increase') {
x1 = (mousePos.x-(stage.getWidth() / 2));
y1 = (mousePos.y-WHEEL_RADIUS+20);
var r = Math.sqrt(x1 * x1 + y1 * y1);
if (r>500){
r=500;
} else if (r<100){
r=100;
};
currentVolume.setRadius(r);
layer.draw();
} else {
if(controlled && mousePos && target) {
x1 = mousePos.x - wheel.x();
y1 = mousePos.y - wheel.y();
var x2 = startX - wheel.x();
var y2 = startY - wheel.y();
var angle1 = Math.atan(y1 / x1) * 180 / Math.PI;
var angle2 = Math.atan(y2 / x2) * 180 / Math.PI;
var angleDiff = angle2 - angle1;
if ((x1 < 0 && x2 >=0) || (x2 < 0 && x1 >=0)) {
angleDiff += 180;
}
wheel.setRotation(startRotation - angleDiff);
}
};
}, false);
}
function getRandomReward() {
var mainDigit = Math.round(Math.random() * 9);
return mainDigit + '\n0\n0';
}
function addWedge(n) {
var s = getRandomColor();
var reward = getRandomReward();
var r = s[0];
var g = s[1];
var b = s[2];
var angle = 360 / NUM_WEDGES;
var endColor = 'rgb(' + r + ',' + g + ',' + b + ')';
r += 100;
g += 100;
b += 100;
var startColor = 'rgb(' + r + ',' + g + ',' + b + ')';
var wedge = new Kinetic.Group({
rotation: n * 360 / NUM_WEDGES,
});
var wedgeBackground = new Kinetic.Wedge({
radius: WHEEL_RADIUS,
angle: angle,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndRadius: WHEEL_RADIUS,
fillRadialGradientColorStops: [0, startColor, 1, endColor],
fill: '#64e9f8',
fillPriority: 'radial-gradient',
stroke: '#ccc',
strokeWidth: 2,
rotation: (90 + angle/2) * -1
});
wedge.add(wedgeBackground);
var text = new Kinetic.Text({
text: reward,
fontFamily: 'Calibri',
fontSize: 50,
fill: 'white',
align: 'center',
stroke: 'yellow',
strokeWidth: 1,
listening: false
});
text.offsetX(text.width()/2);
text.offsetY(WHEEL_RADIUS - 15);
wedge.add(text);
volume = createVolumeControl(angle, endColor);
wedge.add(volume);
wheel.add(wedge);
}
var activeWedge;
function createVolumeControl(angle, colour){
var volume = new Kinetic.Wedge({
radius: 100,
angle: angle,
fill: colour,
stroke: '#000000',
rotation: (90 + angle/2) * -1
});
volume.on("mousedown touchstart", function() {
currentVolume = this;
action='increase';
});
return volume;
}
function animate(frame) {
// wheel
var angularVelocityChange = angularVelocity * frame.timeDiff * (1 - ANGULAR_FRICTION) / 1000;
angularVelocity -= angularVelocityChange;
if(controlled) {
angularVelocity = ((wheel.getRotation() - lastRotation) * 1000 / frame.timeDiff);
}
else {
wheel.rotate(frame.timeDiff * angularVelocity / 1000);
}
lastRotation = wheel.getRotation();
// pointer
var intersectedWedge = layer.getIntersection({x: stage.width()/2, y: 50});
if (intersectedWedge && (!activeWedge || activeWedge._id !== intersectedWedge._id)) {
pointerTween.reset();
pointerTween.play();
activeWedge = intersectedWedge;
}
}
function init() {
stage = new Kinetic.Stage({
container: 'container',
width: 578,
height: 500
});
layer = new Kinetic.Layer();
wheel = new Kinetic.Group({
x: stage.getWidth() / 2,
y: WHEEL_RADIUS + 20
});
for(var n = 0; n < NUM_WEDGES; n++) {
addWedge(n);
}
pointer = new Kinetic.Wedge({
fillRadialGradientStartPoint: 0,
fillRadialGradientStartRadius: 0,
fillRadialGradientEndPoint: 0,
fillRadialGradientEndRadius: 30,
fillRadialGradientColorStops: [0, 'white', 1, 'red'],
stroke: 'white',
strokeWidth: 2,
lineJoin: 'round',
angle: 30,
radius: 30,
x: stage.getWidth() / 2,
y: 20,
rotation: -105,
shadowColor: 'black',
shadowOffset: {x:3,y:3},
shadowBlur: 2,
shadowOpacity: 0.5
});
// add components to the stage
layer.add(wheel);
layer.add(pointer);
stage.add(layer);
pointerTween = new Kinetic.Tween({
node: pointer,
duration: 0.1,
easing: Kinetic.Easings.EaseInOut,
y: 30
});
pointerTween.finish();
var radiusPlus2 = WHEEL_RADIUS + 2;
wheel.cache({
x: -1* radiusPlus2,
y: -1* radiusPlus2,
width: radiusPlus2 * 2,
height: radiusPlus2 * 2
}).offset({
x: radiusPlus2,
y: radiusPlus2
});
layer.draw();
// bind events
bind();
var anim = new Kinetic.Animation(animate, layer);
//document.getElementById('debug').appendChild(layer.hitCanvas._canvas);
// wait one second and then spin the wheel
setTimeout(function() {
anim.start();
}, 1000);
}
init();
I made a couple of changes to the script which greatly improved the response time. The first was replacing layer.draw() with layer.batchDraw(). As the draw function was being called on each touchmove event it was making the interaction clunky. BatchDraw on the other hand will stack up draw requests internally "limit the number of redraws per second based on the maximum number of frames per second" (http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-batch-draw).
The jumping around of the canvas I seeing originally when I cached/cleared the wheel was due to the fact that I wasn't resetting the offset on the wheel when I cleared the cache.
http://jsfiddle.net/leydar/a7tkA/5
wheel.clearCache().offset({
x: 0,
y: 0
});
I hope this is of benefit to someone else. It's still not perfectly responsive but it's at least going in the right direction.
Stephen