We Keep Coding

Modify path with anchor points on HTML5 canvas

My problem is how to make a UI where the user can modify a complex path by dragging anchor points that are on the path. Note on - for example the control points for Bezier curves in this example in the Konvajs documentation are off the path itself, whereas I prefer anchor points on a complex path.
I will be trying to modify a curve created as in this question.
Here is a snippet that draws a sample path. Can anyone help me please? Scroll the snippet window down slightly then click on the rectangle to see the path animation.
var stage = new Konva.Stage({
container: 'container',
width: 500,
height: 500
});
var layer = new Konva.Layer();
var rect = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
stroke: '#555',
strokeWidth: 3,
fill: '#ddd',
width: 50,
height: 50,
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10
});
var path = new Konva.Path({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
data: 'M30 10 C-20 -50 -20 -70 50 -80 C150 -100 50 -150 -100 -80',
stroke: '#00D2FF',
strokeWidth: 5
});
var pathLen = path.getLength() + 10;
path.dashOffset(pathLen);
path.dash([pathLen]);
var anim = new Konva.Animation(function (frame) {
var dashLen = pathLen - frame.time / 5;
if (dashLen < 0) {
var tween = new Konva.Tween({
node: path,
duration: 1,
strokeWidth: 10,
easing: Konva.Easings.ElasticEaseOut
});
tween.play();
anim.stop();
} else {
path.dashOffset(dashLen);
}
}, layer);
rect.on('mousedown', function() {
anim.start();
})
layer.add(path);
layer.add(rect);
stage.add(layer);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 500px, height: 500px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>
Also, can anyone suggest why part of the curve is drawn before the animation runs?

My solution without anchor on control point:
var stage = new Konva.Stage({
container: "container",
width: 500,
height: 500,
draggable: true
});
var layer = new Konva.Layer();
var curveLayer = new Konva.Layer();
var k = 0;
var rect = new Konva.Rect({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
stroke: "#555",
strokeWidth: 3,
fill: "#ddd",
width: 50,
height: 50,
shadowColor: "black",
shadowBlur: 10,
shadowOffset: [10, 10],
shadowOpacity: 0.2,
cornerRadius: 10
});
var path = buildPath("M25 25 L-75 -200 C-75 -200 -120 -300 -200 -200");
var pathLen = path.getLength() + 1000;
path.dashOffset(pathLen);
path.dash([pathLen]);
var anim = new Konva.Animation(function(frame) {
var dashLen = pathLen - frame.time * 10;
if (dashLen < 0) {
var tween = new Konva.Tween({
node: path,
duration: 1,
strokeWidth: 10,
easing: Konva.Easings.ElasticEaseOut
});
var circle = buildAnchorPoint(-75, -200);
var circle1 = buildAnchorPoint(-200, -200);
//var circle2 = buildAnchorPoint(-120, -242.5);
layer.draw();
circle.on("dragmove", function() {
var point = stage.getPointerPosition();
var pointx = point.x - stage.x();
var pointy = point.y - stage.y();
console.log(
"X: " +
(pointx - stage.getWidth() / 2) +
" Y: " +
(pointy - stage.getHeight() / 2)
);
path.data(
"M25 25 L" +
(pointx - stage.getWidth() / 2) +
" " +
(pointy - stage.getHeight() / 2) +
" C" +
(pointx - stage.getWidth() / 2) +
" " +
(pointy - stage.getHeight() / 2) +
"-120 -300" +
(circle1.getX() - stage.getWidth() / 2) +
" " +
(circle1.getY() - stage.getHeight() / 2)
);
curveLayer.draw();
layer.draw();
});
circle1.on("dragmove", function() {
var point = stage.getPointerPosition();
var pointx = point.x - stage.x();
var pointy = point.y - stage.y();
console.log(
"X: " +
(point.x - stage.getWidth() / 2) +
" Y: " +
(point.y - stage.getHeight() / 2)
);
path.data(
"M25 25 L" +
(circle.getX() - stage.getWidth() / 2) +
" " +
(circle.getY() - stage.getHeight() / 2) +
"C" +
(circle.getX() - stage.getWidth() / 2) +
" " +
(circle.getY() - stage.getHeight() / 2) +
" -120 -300 " +
(pointx - stage.getWidth() / 2) +
" " +
(pointy - stage.getHeight() / 2)
);
curveLayer.draw();
layer.draw();
});
tween.play();
anim.stop();
} else {
path.dashOffset(dashLen);
}
}, curveLayer);
rect.on("mousedown", function() {
if (k == 0) {
anim.start();
k++;
}
});
layer.add(rect);
stage.add(curveLayer);
stage.add(layer);
function buildPath(data) {
var path = new Konva.Path({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
data: data,
stroke: "#00D2FF",
strokeWidth: 5,
lineJoin: "round",
lineCap: "round"
});
curveLayer.add(path);
return path;
}
function buildAnchorPoint(x, y) {
var circle = new Konva.Circle({
x: stage.getWidth() / 2 + x,
y: stage.getHeight() / 2 + y,
stroke: "#c1fbff",
strokeWidth: 1,
fill: "#00D2FF",
radius: 5,
cornerRadius: 10,
draggable: true
});
layer.add(circle);
return circle;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/2.5.1/konva.js"></script>
<div id='container' style="display: inline-block; width: 500px, height: 500px; background-color: silver; overflow: hidden; position: relative;"></div>
<div id='img'></div>
Can someone help with anchor on control point?
Also, I'd like to clean code a bit, because I will have many paths witch anchors, that's why I need to make handlers not like in my code, help please!

How to draw sector (not arc) in fabric js?

I am trying to draw semecircle (sector) with fabricjs:
$('#button').click(function(){
fov+=10;
drawSector(fov);
});
$('#button2').click(function(){
fov-=10;
drawSector(fov);
});
var w=500,h=500;
var R = 100;
var fov = 75.0;
var lastFOV;
var ele = {
center: {x: 0.5, y:0.5},
focal: {x: 0.5, y: 0.5},
radius: 0.6,
transform: {
rotate: 0,
translate: {
x: 0,
y: 0,
},
scale: {
x: 1,
y: 1,
}
},
stops: [
{offset: '0', color: "purple",alpha:'0.75'},
{offset: '0.9', color: "transparent",opacity:'0'}
]
};
var tr_str = "rotate("+ele.transform.rotate+",0.5,0.5) translate("+ele.transform.translate.x*w+","+ele.transform.translate.y*h+") scale("+ele.transform.scale.x+","+ele.transform.scale.y+")";
var tr_matrix = fabric.parseTransformAttribute(tr_str);
var rg = {
type: 'radial',
x1: ele.center.x,
y1: ele.center.y,
r1: 0,
x2: ele.focal.x,
y2: ele.focal.y,
r2: R,
//transformMatrix: [1,0,0,2,0,0],
//gradientTransform: [1,0,0,2,0,0],
gradientTransform: tr_matrix,
colorStops: (function(){
var color_stops = {};
for(var i=0;i<ele.stops.length;i++){
color_stops[ele.stops[i].offset] = ele.stops[i].color;
}
return color_stops;
})()
};
var HideControls = {
'tl':false,
'tr':false,
'bl':false,
'br':false,
'ml':false,
'mt':false,
'mr':false,
'mb':false,
'mtr':true
};
var canvas = new fabric.Canvas('canvas1');
canvas.setWidth(w);
canvas.setHeight(h);
var x,y,my,startPoints;
var sector;
var rotationAngle = 0;
drawSector(fov);
function drawSector(fov){
$('#fov').html("FOV = "+fov);
x = Math.cos(fov*Math.PI/180.0)*R;
y = Math.sin(fov*Math.PI/180.0)*R;
my = -Math.sin(fov/2.*Math.PI/180.0)*R/2.;
startPoints = [
{x: 0, y: 0},
{x: R, y: 0},
{x: x, y: y}
];
if(sector) {
rotationAngle = sector.angle;
canvas.remove(sector);
}
sector = new fabric.Polygon(startPoints,{
left: w/2,
top: h/2,
originX:'left',
originY:'top',
centeredRotation:false,
hasBorders:false,
lockMovementX:true,
lockMovementY:true,
rotatingPointOffset:my,
width: R,
height: R
});
sector.setControlsVisibility(HideControls);
sector.setGradient('fill', rg);
rotationAngle = rotationAngle==0?-fov/2:rotationAngle-(fov-lastFOV)/2;
sector.setAngle(rotationAngle);
canvas.add(sector);
lastFOV = fov;
}
https://jsfiddle.net/2v0es4xh/35/
But when FOV is bigger than 90, rotationX/Y is changing.
There is something in Leaflet http://jieter.github.io/Leaflet-semicircle/examples/semicircle.html
It would be great if I can draw semicircle like this using fabric.
is there anyone who tried to do this?
Thank you in advance.

Try something like this: http://jsfiddle.net/qoadhrop/
Set two semi-circles on top of a main circle to give you this kind of "radius" effect
HTML:
<canvas id="c" width="300" height="300"></canvas>
JS:
var canvas = new fabric.Canvas('c');
var c1 = new fabric.Circle({
radius: 50,
left: 100,
top: 100,
stroke: '#000',
strokeWidth: 1,
fill: 'lightblue',
opacity: 0.8
});
var c2 = new fabric.Circle({
radius: 50,
left: 100,
top: 100,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 1,
fill: 'red'
});
c2.setAngle(45);
var c3 = new fabric.Circle({
radius: 50,
left: 100,
top: 100,
flipX: true,
startAngle: 0,
endAngle: Math.PI,
stroke: '#000',
strokeWidth: 1,
fill: 'red'
});
c3.setAngle(-45);
canvas.add(c1);
canvas.add(c2);
canvas.add(c3);

The previous code by A. Lau doesn't work. So, this is my simple implementation. You can draw any sectors and rotate them. Try live example at https://jsfiddle.net/irwinwelsh/rn9emuqd/
var canvas = new fabric.Canvas('c');
function arc(left,top,radius,angle, rotate) {
var coeff = Math.PI/180;
var xshift = Math.sqrt(2) * radius * ( Math.cos(45 * coeff) - Math.cos((45 + rotate) * coeff));
var yshift = Math.sqrt(2) * radius * ( Math.sin(45 * coeff) - Math.sin((45 + rotate) * coeff));
left = left + xshift;
top = top + yshift;
var width = 2 * radius * Math.sin((angle/2) * coeff);
var height = radius * Math.cos((angle/2) * coeff);
var triangle = new fabric.Triangle({
width: width,
height: height,
left: left + width/2,
top: top,
fill: 'rgba(0,200,0,0.3)',
angle: 180,
});
var circle = new fabric.Circle({
radius: radius,
fill: 'rgba(0,200,0,0.3)',
left: left - radius,
top: top - radius,
startAngle: (270 - angle/2) * coeff,
endAngle: (270 + angle/2) * coeff,
angle: 0,
});
var group = new fabric.Group([circle,triangle],{
angle : rotate,
});
return group;
}
var sector = arc(100,200,200,30, 30);
canvas.add(sector);

Fabric.js bounding box with blurred shadows

I'm trying to draw a bounding box around objects that have a shadow. object.getBoundingRect() does not take into account shadows. Regular shadows are straightforward, but when blur is added it is more difficult.
Is there a way to get the bounds?
https://jsfiddle.net/e77c0owf/
function getObjBounds(obj) {
var bounds = obj.getBoundingRect();
var shadow = obj.getShadow();
if (shadow !== null) {
var blur = shadow.blur;
var signX = shadow.offsetX >= 0.0 ? 1.0 : -1.0;
var signY = shadow.offsetY >= 0.0 ? 1.0 : -1.0;
var offsetX = (shadow.offsetX + (signX * blur)) * Math.abs(obj.scaleX);
var offsetY = (shadow.offsetY + (signY * blur)) * Math.abs(obj.scaleY);
if (offsetX > 0) {
bounds.width += offsetX;
} else if (offsetX < 0) {
bounds.width += Math.abs(offsetX);
bounds.left -= Math.abs(offsetX);
}
if (offsetY > 0) {
bounds.height += offsetY;
} else if (offsetY < 0) {
bounds.height += Math.abs(offsetY);
bounds.top -= Math.abs(offsetY);
}
}
return bounds;
}

You have to check fabricjs calculations for blurring and scaling, plus you have to take in account situation where offset of shadow is smaller than blur value.
function getObjBounds(obj) {
var bounds = obj.getBoundingRect();
var shadow = obj.getShadow();
if (shadow !== null) {
var blur = shadow.blur;
var mBlur = blur * Math.abs(obj.scaleX + obj.scaleY) / 4
var signX = shadow.offsetX >= 0.0 ? 1.0 : -1.0;
var signY = shadow.offsetY >= 0.0 ? 1.0 : -1.0;
var mOffsetX = shadow.offsetX * Math.abs(obj.scaleX);
var mOffsetY = shadow.offsetY * Math.abs(obj.scaleY);
var offsetX = mOffsetX + (signX * mBlur);
var offsetY = mOffsetY + (signY * mBlur);
if (mOffsetX > mBlur) {
bounds.width += offsetX;
} else if (mOffsetX < -mBlur) {
bounds.width -= offsetX;
bounds.left += offsetX;;
} else {
bounds.width += mBlur * 2;
bounds.left -= mBlur - mOffsetX;
}
if (mOffsetY > mBlur) {
bounds.height += offsetY;
} else if (mOffsetY < -mBlur) {
bounds.height -= offsetY;
bounds.top += offsetY;
} else {
bounds.height += mBlur * 2;
bounds.top -= mBlur - mOffsetY;
}
}
return bounds;
}
resulting fiddle:
https://jsfiddle.net/e77c0owf/1/
// ************************************
// Bounding box calculation logic
// ************************************
function getObjBounds(obj) {
var bounds = obj.getBoundingRect();
var shadow = obj.getShadow();
if (shadow !== null) {
var blur = shadow.blur;
var mBlur = blur * Math.abs(obj.scaleX + obj.scaleY) / 4
var signX = shadow.offsetX >= 0.0 ? 1.0 : -1.0;
var signY = shadow.offsetY >= 0.0 ? 1.0 : -1.0;
var mOffsetX = shadow.offsetX * Math.abs(obj.scaleX);
var mOffsetY = shadow.offsetY * Math.abs(obj.scaleY);
var offsetX = mOffsetX + (signX * mBlur);
var offsetY = mOffsetY + (signY * mBlur);
if (mOffsetX > mBlur) {
bounds.width += offsetX;
} else if (mOffsetX < -mBlur) {
bounds.width -= offsetX;
bounds.left += offsetX;;
} else {
bounds.width += mBlur * 2;
bounds.left -= mBlur - mOffsetX;
}
if (mOffsetY > mBlur) {
bounds.height += offsetY;
} else if (mOffsetY < -mBlur) {
bounds.height -= offsetY;
bounds.top += offsetY;
} else {
bounds.height += mBlur * 2;
bounds.top -= mBlur - mOffsetY;
}
}
return bounds;
}
// ************************************
// Draw a ton of test cases below here
// ************************************
// Create a canvas
var canvas = new fabric.Canvas('c', {
backgroundColor: '#FFFFFF'
});
canvas.add(new fabric.Rect({
fill: 'red',
left: 100,
top: 100,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 0,
offsetX: -20,
offsetY: -10
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 30,
top: 20,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 0,
offsetX: -20,
offsetY: 0
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 30,
top: 250,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 0,
offsetX: 60,
offsetY: -60
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 180,
top: 20,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 10,
offsetX: 20,
offsetY: 20
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 180,
top: 150,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 20,
offsetX: 0,
offsetY: 0
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 220,
top: 280,
width: 50,
height: 50,
shadow: {
color: 'black',
blur: 20,
offsetX: -10,
offsetY: -10
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 280,
top: 20,
width: 50,
height: 50,
scaleX: 2.3,
scaleY: 2.3,
shadow: {
color: 'black',
blur: 10,
offsetX: 20,
offsetY: 20
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 360,
top: 230,
width: 50,
height: 50,
scaleX: 0.5,
scaleY: 0.5,
shadow: {
color: 'black',
blur: 20,
offsetX: 0,
offsetY: 0
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 380,
top: 290,
width: 50,
height: 50,
scaleX: 2.0,
scaleY: 2.0,
shadow: {
color: 'black',
blur: 10,
offsetX: 0,
offsetY: 0
}
}));
canvas.add(new fabric.Rect({
fill: 'red',
left: 140,
top: 380,
width: 50,
height: 50,
scaleX: -4.0,
scaleY: 0.5,
shadow: {
color: 'black',
blur: 20,
offsetX: -10,
offsetY: -10
}
}));
// Draw bounding boxes
var objs = canvas.getObjects();
var boxes = [];
for (var i = 0; i < objs.length; i++) {
var box = getObjBounds(objs[i]);
boxes.push(new fabric.Rect({
fill: '',
stroke: 'blue',
strokeWidth: 1,
left: box.left,
top: box.top,
width: box.width,
height: box.height
}));
}
for (var j = 0; j < boxes.length; j++) {
canvas.add(boxes[j]);
}
canvas.renderAll();
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<canvas id="c" width="550" height="450"></canvas>

KineticJS: Curved line between two draggable shapes

I am using KineticJS in my project. I need to connect two shapes using a curved line. One of the shapes can be dragged. I am able to put the curved line between shapes. The problem arises when user starts dragging the shapes. The requirement is that it should be properly curved (please refer to screen shots), irrespective of distance between them and their position with respect to each other. I am doing this:
var utils = {
_getCenter: function(x1, y1, x2, y2) {
return {
x: (x1 + x2) / 2,
y: (y1 + y2) / 2
}
},
// Converts from degrees to radians.
_radians: function(degrees) {
return degrees * Math.PI / 180;
},
// Converts from radians to degrees.
_degrees: function(radians) {
return radians * 180 / Math.PI;
}
};
function amplitude(point) {
var rad_90 = utils._radians(90);
var rad_45 = utils._radians(45);
var rad_60 = utils._radians(60);
console.log(rad_90);
return {
x: point.x * Math.cos(rad_60),
y: point.y * Math.sin(rad_60)
};
}
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Kinetic.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Kinetic.Layer();
var circle = new Kinetic.Circle({
x: stage.getWidth() / 2,
y: stage.getHeight() / 2,
radius: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 2
});
var attachedCircle = new Kinetic.Circle({
x: stage.getWidth() / 4,
y: stage.getHeight() / 4,
radius: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 2,
draggable: true
});
var center = amplitude(utils._getCenter(circle.getX(), circle.getY(), attachedCircle.getX(), attachedCircle.getY()));
var line = new Kinetic.Line({
points: [circle.getX(), circle.getY(), center.x, center.y, attachedCircle.getX(), attachedCircle.getY()],
fill: 'black',
stroke: 'green',
strokeWidth: 3,
/*
* line segments with a length of 33px
* with a gap of 10px
*/
dash: [33, 10],
id: 'line',
tension: 0.5
});
attachedCircle.on('dragmove', function(e) {
var targetCircle = e.target;
var tempCenter = amplitude(utils._getCenter(circle.getX(), circle.getY(), targetCircle.getX(), targetCircle.getY()));
console.log(tempCenter);
line.setPoints([circle.getX(), circle.getY(), tempCenter.x, tempCenter.y, targetCircle.getX(), targetCircle.getY()]);
});
// add the shape to the layer
layer.add(line);
layer.add(attachedCircle);
layer.add(circle);
// add the layer to the stage
stage.add(layer);
I don't know what I am missing. I have created the plunkr for this.

To define you amplitude function you need to use two input points:
function amplidure2(p1, p2) {
var alpha = Math.atan((p1.x - p2.x) / (p1.y - p2.y)) + Math.PI / 2;
if (p1.y < p2.y) {
alpha += Math.PI;
}
var center = utils._getCenter(p1.x, p1.y, p2.x, p2.y);
var r = 50;
return {
x: center.x + r * Math.sin(alpha),
y: center.y + r * Math.cos(alpha)
}
}
DEMO

KineticJS: How to Cache a Group of Shapes?

I want to increase mobile drag and drop performance of canvas objects. I have a Group which contains different Shapes (Images, Stars, Recs,...). I want to use caching to increase the performance when I drag and drop or rotate the entire Group.
Here is a JSFiddle I created: http://jsfiddle.net/confile/k4Lsv73d/
function setFPSMeter() {
var RAF = (function () {
return window["requestAnimationFrame"] || window["webkitRequestAnimationFrame"] || window["mozRequestAnimationFrame"] || window["oRequestAnimationFrame"] || window["msRequestAnimationFrame"] || FRAF;
})();
function FRAF(callback) {
window.setTimeout(callback, 1000 / 60);
}
var fpsDiv = document.createElement("div");
fpsDiv.style.position = "absolute";
fpsDiv.style.zIndex="40000";
document.body.appendChild(fpsDiv);
var meter = new window.FPSMeter(fpsDiv, {
position: 'fixed',
zIndex: 10,
right: '5px',
top: '5px',
left: 'auto',
bottom: 'auto',
margin: '0 0 0 0',
interval: 1000,
graph: true,
history: 20,
theme: 'colorful',
heat: true
});
var tick = function () {
meter.tick();
RAF(tick);
};
tick();
}
setFPSMeter();
console.log(!!window.FPSMeter);
Kinetic.pixelRatio = 1;
//console.log(window.requestAnimationFrame);
// http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js
var width = $("#container").width();
var height = $("#container").height();
console.log("width: "+width+" height: "+height);
var stage = new Kinetic.Stage({
container: 'container',
width: width,
height: 400
});
var layer = new Kinetic.Layer();
// add the layer to the stage
stage.add(layer);
var blob;
var imageObj = new Image();
imageObj.onload = function () {
var group = new Kinetic.Group({
draggable: true
});
var star = new Kinetic.Star({
innerRadius: 50,
outerRadius: 70,
fill: 'red',
stroke: 'black',
strokeWidth: 5,
numPoints: 20,
x: 200,
y: 100,
shadowOffset: 5,
shadowColor: 'black',
shadowBlur: 5,
shadowOpacity: 0.5
});
blob = new Kinetic.Image({
image: imageObj,
x: 50,
y: 40,
// draggable: true,
width: 300,
height: 300
});
// performance
// blob.transformsEnabled('position');
group.add(blob);
group.add(star);
// setTimeout(function () {
// add the shape to the layer
//layer.add(blob);
layer.add(group);
// blob.cache();
layer.batchDraw();
// }, 50);
loadEvents();
/*
blob.cache({
width: 500,
height: 500,
drawBorder: true
}).offset({
x: 10,
y: 10
});
*/
/*
blob.cache({
drawBorder: true
});
*/
};
imageObj.src = "https://dl.dropboxusercontent.com/u/47067729/sandwich2.svg";
function getDistance(p1, p2) {
return Math.sqrt(Math.pow((p2.x - p1.x), 2) + Math.pow((p2.y - p1.y), 2));
}
function loadEvents() {
var lastDist = 0;
var startScale = 1;
stage.getContent().addEventListener('touchstart', function (evt) {
console.log("touchstart");
blob.clearCache();
blob.cache();
}, false);
stage.getContent().addEventListener('touchmove', function (evt) {
clearCache
var touch1 = evt.touches[0];
var touch2 = evt.touches[1];
if (touch1 && touch2) {
// blob.draggable(false);
var dist = getDistance({
x: touch1.clientX,
y: touch1.clientY
}, {
x: touch2.clientX,
y: touch2.clientY
});
if (lastDist == 0) {
lastDist = dist;
}
console.log("touchmove dist: "+dist);
console.log("touchmove lastDist: "+lastDist);
console.log("blob.getScale().x: "+blob.getScale().x);
// scale
var scale = blob.getScale().x * dist / lastDist;
console.log("scale: "+scale);
blob.setScale(scale);
lastDist = dist;
//// rotate
///
layer.batchDraw();
}
}, false);
stage.getContent().addEventListener('touchend', function (evt) {
console.log("touchend");
// blob.draggable(true);
lastDist = 0;
}, false);
}
How can I use caching on a Group of Shapes in KineticJS?

group.cache({
width: blob.width(),
height: blob.height(),
x : blob.x(),
y : blob.y(),
drawBorder: true
}).offset({
x: 10,
y: 10
});
http://jsfiddle.net/k4Lsv73d/2/
You should better config x, y, width and height attrs for caching.