123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102 |
- jsPlumb.Connectors.ExampleConnector = function() {
- jsPlumb.Connectors.Straight.apply(this);
- var self = this;
-
- var arrowType1 = function(params) {
- params = params || {};
- var length = params.length || 20;
- var width = params.width || 20;
- var fillStyle = params.fillStyle || "black";
- var strokeStyle = params.strokeStyle || "yellow";
- var lineWidth = params.lineWidth || 1;
- this.draw = function(connector, location, ctx) {
- // this is the arrow head position
- var hxy = connector.pointAlongPathFrom(location, length / 2), hx = hxy[0], hy = hxy[1];
- // this is the center of the tail
- var txy = connector.pointAlongPathFrom(location, -length / 2), tx = txy[0], ty = txy[1];
- // this is the tail vector
- var tail = connector.perpendicularToPath(tx, ty, width);
-
- ctx.lineWidth = lineWidth;
- ctx.beginPath();
- ctx.moveTo(hx, hy);
- ctx.lineTo(tail[0][0], tail[0][1]);
- ctx.lineTo(tail[1][0], tail[1][1]);
- ctx.lineTo(hx, hy);
- ctx.closePath();
- if (strokeStyle) {
- ctx.strokeStyle = strokeStyle;
- ctx.stroke();
- }
-
- ctx.fillStyle = fillStyle;
- ctx.fill();
- };
- };
-
- /**
- * an arrow that folds back on itself instead of having a straight back edge. by default the foldback point is 62.3% along the length of the
- * arrow, which is roughly a golden ratio along the arrow and therefore looks quite nice. you can change that by setting the 'foldback'
- * parameter when you construct this. available params are:
- *
- * length - length in pixels of the arrow
- * width - width in pixels of the arrow's tail at its widest point
- * foldback - a decimal value indicating where along the arrow the tail points should fold back in to.
- */
- var arrowType2 = function(params) {
- params = params || {};
- var length = params.length || 20;
- var width = params.width || 20;
- var fillStyle = params.fillStyle || "black";
- var strokeStyle = params.strokeStyle || "yellow";
- var lineWidth = params.lineWidth || 1;
- // how far along the arrow the lines folding back in come to. default is 62.3%.
- var foldback = params.foldback || 0.623;
- var _getFoldBackPoint = function(connector, location) {
- if (foldback == 0.5) return connector.pointOnPath(location);
- else {
- var adj = 0.5 - foldback; // we calculate relative to the center
- return connector.pointAlongPathFrom(location, length * adj);
- }
- };
-
- this.draw = function(connector, location, ctx) {
- // this is the arrow head position
- var hxy = connector.pointAlongPathFrom(location, length / 2);
- // this is the center of the tail
- var txy = connector.pointAlongPathFrom(location, -length / 2), tx = txy[0], ty = txy[1];
- // this is the tail vector
- var tail = connector.perpendicularToPath(tx, ty, width);
- // this is the point the tail goes in to
- var cxy = _getFoldBackPoint(connector, location);
-
- ctx.lineWidth = lineWidth;
- ctx.beginPath();
- ctx.moveTo(hxy[0], hxy[1]);
- ctx.lineTo(tail[0][0], tail[0][1]);
- ctx.lineTo(cxy[0], cxy[1]);
- ctx.lineTo(tail[1][0], tail[1][1]);
- ctx.lineTo(hxy[0], hxy[1]);
- ctx.closePath();
-
- if (strokeStyle) {
- ctx.strokeStyle = strokeStyle;
- ctx.stroke();
- }
- ctx.fillStyle = fillStyle;
- ctx.fill();
- }
- };
- var _p = self.paint;
- this.paint = function(dimensions, ctx)
- {
- _p(dimensions,ctx);
-
- new arrowType1().draw(self, 0.333333333333333, ctx);
- new arrowType2().draw(self, 0.666666666666666, ctx);
-
- };
- };
|