Fabric js with gesture how to prevent zooming on touch devices - javascript

I'm using fabric js with gestures, but i want to prevent zooming, if zoom is getting more than 4x in and less than 1x out
I've tried to call preventDefault() and stopPropogation() functions on the event, but it doesn't stop the zooming
event.e.stopPropagation();

Get the deltaY & getZoom then you can limit the zoom as below.
var canvas = new fabric.Canvas('c');
var dia1 = new fabric.Circle({
radius: 12,
originX: 'center',
originY: 'center',
fill: 'transparent',
strokeWidth: 5,
stroke: "red",
});
var dia2 = new fabric.Circle({
radius: 5,
originX: 'center',
originY: 'center',
fill: 'red',
});
var targetEl = new fabric.Group([dia1, dia2], {
originX: 'center',
originY: 'center',
});
canvas.centerObject(targetEl);
canvas.add(targetEl);
canvas.renderAll();
//mouse zoom
canvas.on('mouse:wheel', function(opt) {
var delta = opt.e.deltaY;
var pointer = canvas.getPointer(opt.e);
var zoom = canvas.getZoom();
zoom = zoom - delta / 200;
// limit zoom to 4x in
if (zoom > 4) zoom = 4;
// limit zoom to 1x out
if (zoom < 1) {
zoom = 1;
canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
}
canvas.zoomToPoint({
x: opt.e.offsetX,
y: opt.e.offsetY
}, zoom);
opt.e.preventDefault();
opt.e.stopPropagation();
});
//touch zoom
canvas.on({
'touch:gesture': function(e) {
if (e.e.touches && e.e.touches.length == 2) {
pausePanning = true;
var point = new fabric.Point(e.self.x, e.self.y);
if (e.self.state == "start") {
zoomStartScale = canvas.getZoom();
}
var delta = zoomStartScale * e.self.scale;
canvas.zoomToPoint(point, delta);
pausePanning = false;
// limit zoom to 4x in
if (delta > 4) delta = 4;
// limit zoom to 1x out
if (delta < 1) {
delta = 1;
canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
}
}
}
});
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.4.0/fabric.js"></script>
<canvas id="c" width="600" height="300"></canvas>

Related

Place image to alpha channels in canvas

I need to find top, left, max width and max height values of all transparent places in canvas.
http://jsfiddle.net/alperxx/t521jra4/ (fiddle)
I have 4 transparent place in canvas. but i can't detect true places. First alpha channel corners colour must be red. Next is: black, yellow and green. But my groups is not correct.
If I complete the groups truely, every uploading photos will place to alpha places.
My Processes are in comment.
function alphaRatio(ctx) {
var pixelData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
const data = pixelData.data;
const pixel_groups = [];
var total = 0;
for (let i = 0, dx = 0; dx < data.length; i++, dx = i << 2) {
if (data[dx + 3] == 0) {
//First, I'm catching all transparent pixels.
total++;
var x = (dx / 4) % ctx.canvas.width;
var y = ~~((dx / 4) / ctx.canvas.width);
// if pixel after a last grouped item add to in.
var found = false;
if (pixel_groups.length) {
for (im = 0; im < pixel_groups.length; im++) {
last_pixels = pixel_groups[im][pixel_groups[im].length - 1];
if (
last_pixels.x + 1 == x || last_pixels.x - 1 == x ||
last_pixels.y + 1 == y || last_pixels.y - 1 == y
) {
found = true;
pixel_groups[im].push({
x: x,
y: y
});
break;
}
}
}
if (!found) {
pixel_groups.push([{
x: x,
y: y
}]);
}
}
}
// i grouped all them
if (pixel_groups.length) {
console.debug(pixel_groups);
for (i = 0; i < pixel_groups.length; i++) {
var alphawidth = {};
var alphaheight = {};
for (im = 0; im < pixel_groups[i].length; im++) {
//now lets calculate first pixel left and top for width and height
if (typeof(alphawidth['min']) === 'undefined') {
alphawidth['min'] = pixel_groups[i][im].x;
alphawidth['max'] = pixel_groups[i][im].x;
} else {
if (pixel_groups[i][im].x < alphawidth['min']) {
alphawidth['min'] = pixel_groups[i][im].x;
}
if (pixel_groups[i][im].x > alphawidth['max']) {
alphawidth['max'] = pixel_groups[i][im].x;
}
}
if (typeof(alphaheight['min']) === 'undefined') {
alphaheight['min'] = pixel_groups[i][im].y;
alphaheight['max'] = pixel_groups[i][im].y;
} else {
if (pixel_groups[i][im].y < alphaheight['min']) {
alphaheight['min'] = pixel_groups[i][im].y;
}
if (pixel_groups[i][im].y > alphaheight['max']) {
alphaheight['max'] = pixel_groups[i][im].y;
}
}
}
// update group key for only x y w h
pixel_groups[i] = {
x: pixel_groups[i][0].x,
y: pixel_groups[i][0].y,
w: alphawidth['max'] - alphawidth['min'],
h: alphaheight['max'] - alphaheight['min']
};
}
// for test alpha places put a colour all corners
for (i = 0; i < pixel_groups.length; i++) {
var colour = ['red', 'black', 'yellow', 'green'];
canvas.add(new fabric.Circle({
left: pixel_groups[i].x,
top: pixel_groups[i].y,
radius: 4,
fill: colour[i],
originX: 'center',
originY: 'center',
hasControls: false
}));
canvas.add(new fabric.Circle({
left: pixel_groups[i].x + pixel_groups[i].w,
top: pixel_groups[i].y + pixel_groups[i].h,
radius: 4,
fill: colour[i],
originX: 'center',
originY: 'center',
hasControls: false
}));
canvas.add(new fabric.Circle({
left: pixel_groups[i].x + pixel_groups[i].w,
top: pixel_groups[i].y,
radius: 4,
fill: colour[i],
originX: 'center',
originY: 'center',
hasControls: false
}));
canvas.add(new fabric.Circle({
left: pixel_groups[i].x,
top: pixel_groups[i].y + pixel_groups[i].h,
radius: 4,
fill: colour[i],
originX: 'center',
originY: 'center',
hasControls: false
}));
}
return pixel_groups;
}
return false;
}

Fabric.js - rotate one object the other rotate too

I have an application using HTML5 canvas via Fabric.js. And I would like to do arrow with text. Then moving arrow the text is in correct position, but is problem with rotation:
incorrect text position:
text position have to be:
My code is:
var canvas = new fabric.Canvas('c');
var line = new fabric.Line([10, 50, 200, 50], {
stroke: 'black',
strokeWidth: 3,
strokeDashArray: [10, 5]
});
var line2 = new fabric.Line([199, 50, 180, 60], {
stroke: 'black',
strokeWidth: 3
});
var line3 = new fabric.Line([199, 50, 180, 40], {
stroke: 'black',
strokeWidth: 3
});
var strele = new fabric.Group([line, line2, line3], {});
tekst = new fabric.IText('<<extend>>', {
left: 50,
top: 20,
fontFamily: 'Arial',
fill: '#333',
fontSize: 20
});
canvas.add(strele, tekst);
function onMoving(options) {
if (options.target === strele) {
tekst.left = strele.left + ((strele.width * strele.scaleX) / 2) - (tekst.width * tekst.scaleX) / 2;
tekst.top = strele.top - strele.height * strele.scaleY;
} else if (options.target === tekst) {
strele.left = tekst.left - ((strele.width * strele.scaleX) / 2 - (tekst.width * tekst.scaleX) / 2);
strele.top = tekst.top + strele.height * strele.scaleY;
}
canvas.forEachObject(function(o) {
o.setCoords()
});
}
function onRotating(options) {
if (options.target === strele) {
tekst.angle = strele.angle;
tekst.left = strele.left((strele.width * strele.scaleX) / 2) - (tekst.width * tekst.scaleX) / 2;
tekst.top = strele.top - strele.height * strele.scaleY;
}
}
canvas.on('object:moving', onMoving);
canvas.on('object:rotating', onRotating);
My code in fiddle
How can I fix this?
Here is an approach that closely resembles your image.
To simplify the calculations I changed the objects origin(X & Y) to center, the rest is just some math and conditions for the angles. My approach was to keep the text readable and not overlap the line.
var canvas = new fabric.Canvas('c');
var line = new fabric.Line([160, 100, 350, 100], {stroke: 'black', strokeWidth: 3, strokeDashArray: [10, 5]});
var line2 = new fabric.Line([350, 100, 330, 110], {stroke: 'black', strokeWidth: 3});
var line3 = new fabric.Line([350, 100, 330, 90], {stroke: 'black', strokeWidth: 3});
var strele = new fabric.Group([line, line2, line3], {originX: "center", originY: "center"});
var tekst = new fabric.IText('<<extend>>', {left: 160, top: 70, fontFamily: 'Arial',fill: 'red', fontSize: 20, selectable: false,
originX: "center", originY: "center"
});
canvas.add(strele, tekst);
canvas.setActiveObject(canvas.item(0));
canvas.on('object:moving', onMoving);
canvas.on('object:rotating', onRotating);
function onMoving() {
tekst.left = strele.left + 20 * Math.sin(strele.angle * Math.PI /180);
tekst.top = strele.top - 20 * Math.cos(strele.angle * Math.PI /180);
}
function onRotating() {
var ang = strele.angle % 360;
if (ang < 270) {
if (ang > 180) {
ang = strele.angle % 180;
} else if (ang > 90) {
ang = 180+strele.angle;
}
}
tekst.angle = ang
onMoving()
}
function rotate() {
strele.angle += 22.2;
strele.setCoords()
onRotating()
canvas.renderAll();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
<button id="rotate" onclick="rotate()">rotate</button>
<canvas id="c" width="600" height="600"></canvas>

Compound Shape Class?

Has anyone ever tried to create a custom shape class for Fabric.js that is a combination of shapes? I want to create something like a ruler, where the left and right ends are vertical lines and is attached to the middle, |---| .
I'd also like to have a text box follow along in the center of this ruler. The ends should also have the ability to reposition.
I've done this without a class, but it won't save or load, since I made my version from multiple shapes.
Anyone have any thoughts if it's possible to create a custom shape like this?
Below is an example of some code that I pulled together from another example I found a while ago. 3 lines are created to make up my ruler. If I export the canvas data I'll get data to recreate as 3 lines, so if I clear the canvas and reload with this data, I'll get my 3 lines, but they will be independent 3 lines. I guess I need to figure out how to save their relationship so they can retain their ruler behavior when reloaded. I was thinking the best approach would be to create a custom shape with a type of "ruler".
window.onload = function() {
var canvas;
var started = false;
var mode = 0;
var lastX = 0;
var lastY = 0;
canvas = new fabric.Canvas('c');
canvas.isDrawingMode = false;
canvas.isTouchSupported = true;
canvas.selection = false;
canvas.on("mouse:down", function(option) {
if (mode === 1) {
var mouse = canvas.getPointer(option.e);
lastX = mouse.x;
lastY = mouse.y;
started = true;
var ln = new fabric.Line([lastX, lastY, lastX, lastY], {
fill: 'red',
stroke: 'red',
strokeWidth: 4,
originX: 'center',
originY: 'center',
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasBorders: false,
hasControls: false,
perPixelTargetFind: true
});
var rAnchor = new fabric.Line([lastX - 20, lastY, lastX + 20, lastY], {
fill: 'red',
stroke: 'red',
strokeWidth: 4,
originX: 'center',
originY: 'center',
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasBorders: false,
hasControls: false,
perPixelTargetFind: true
});
var tip = new fabric.Line([lastX - 20, lastY, lastX + 20, lastY], {
fill: 'red',
stroke: 'red',
strokeWidth: 4,
originX: 'center',
originY: 'center',
lockScalingX: true,
lockScalingY: true,
lockRotation: true,
hasBorders: false,
hasControls: false,
perPixelTargetFind: true
});
tip.line = ln;
rAnchor.line = ln;
ln.tip = tip;
ln.rAnchor = rAnchor;
canvas.add(ln);
canvas.add(rAnchor);
canvas.add(tip);
canvas.setActiveObject(ln);
canvas.renderAll();
}
});
canvas.on("mouse:move", function(e) {
if (!started) {
return false;
}
var mouse = canvas.getPointer(e.e);
var line = canvas.getActiveObject();
line.set('x2', mouse.x).set('y2', mouse.y);
var tip = line.get('tip');
tip.set('left', mouse.x).set('top', mouse.y);
var rAnchor = line.get('rAnchor');
// Get the angle for pointing the tip at the mouse location.
var rad = Math.atan2((line.y1 - line.y2), (line.x1 - line.x2));
var ang = rad * (180 / Math.PI);
tip.set('angle', (ang - 90));
rAnchor.set('angle', (ang - 90));
line.setCoords();
tip.setCoords();
rAnchor.setCoords();
canvas.renderAll();
});
canvas.on("mouse:up", function() {
if (started) {
started = false;
}
canvas.discardActiveObject();
canvas.renderAll();
});
// Event Handler for Drawn Object move
canvas.on('object:moving', function(e) {
var p = e.target;
// move line
if (p.tip) {
var oldCenterX = (p.x1 + p.x2) / 2;
var oldCenterY = (p.y1 + p.y2) / 2;
var deltaX = p.left - oldCenterX;
var deltaY = p.top - oldCenterY;
p.tip.set({
'left': p.x2 + deltaX,
'top': p.y2 + deltaY
}).setCoords();
p.rAnchor.set({
'left': p.x1 + deltaX,
'top': p.y1 + deltaY
});
p.set({
'x1': p.x1 + deltaX,
'y1': p.y1 + deltaY
});
p.set({
'x2': p.x2 + deltaX,
'y2': p.y2 + deltaY
});
p.set({
'left': (p.x1 + p.x2) / 2,
'top': (p.y1 + p.y2) / 2
});
}
// move tip
if (p.line) {
var tip = p.line.tip;
var rAnchor = p.line.rAnchor;
p.line.set({
'x2': tip.left,
'y2': tip.top,
'x1': rAnchor.left,
'y1': rAnchor.top
});
// Get the angle for pointing the tip at the mouse location.
var rad = Math.atan2((p.line.y1 - p.line.y2), (p.line.x1 - p.line.x2));
var ang = rad * (180 / Math.PI);
tip.set('angle', (ang - 90));
rAnchor.set('angle', (ang - 90));
tip.setCoords();
rAnchor.setCoords();
p.line.setCoords();
}
canvas.renderAll();
});
// Button Event Handlers
document.getElementById("btnEdit").addEventListener("click", function(e) {
mode = 0;
});
document.getElementById("btnArrow").addEventListener("click", function(e) {
mode = 1;
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas style="border: 2px solid; " height="500" width="600" id="c"></canvas>
<button id="btnEdit">Edit</button>
<button id="btnArrow">Ruler</button>

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.

Kinetic.js: Get MinX, MaxX, MinY, and MaxY of rotated Kinetic.Label

I'm trying to prevent a rotated Label from being dragged off the screen, but I cannot figure out how to get MinX, MaxX, MinY, and MaxY of the object in its rotated state. getHeight & getWidth only return the values prior to the rotation.
Here is an example illustrating the problem:
var stage = new Kinetic.Stage({
container: 'container',
width: window.innerWidth,
height: window.innerHeight
});
var layer = new Kinetic.Layer();
var labelLeft = new Kinetic.Label({
x: 95,
y: 180,
opacity: 1.0,
listening: true,
draggable: true,
rotationDeg: -45,
text: {
text: 'Pointing Arrow',
fontFamily: 'Calibri',
fontSize: 20,
padding: 5,
fill: 'white'
},
rect: {
fill: 'blue',
pointerDirection: 'left',
pointerWidth: 20,
pointerHeight: 38,
stroke: 'black',
strokeWidth: 2
},
dragBoundFunc: function (pos) {
var newY = pos.y < 50 ? 50 : pos.y;
return {
x: pos.x,
y: newY
};
}
});
layer.add(labelLeft);
// add the layer to the stage
stage.add(layer);
http://jsfiddle.net/fSNnA/4/
In this example, I use dragBoundFunc to prevent the label from being dragged above y=50. but since the label is rotated, its actual highest point (MinY) has changed, and therefore you can drag it up and partially out of view.
What I really need is a function that will return the absolute current MinX, MaxX, MinY, and MaxY - taking into account the angle of rotation and length of text will not always be the same.
Can anyone help?
Here's how to calculate the bounding-box size of a rotated rectangle (label).
var w = label.getWidth();
var h = label.getHeight();
var rads = label.getRotation();
var c = Math.abs(Math.cos(rads));
var s = Math.abs(Math.sin(rads));
var newWidth = h * s + w * c;
var newHeight = h * c + w * s;
Then assuming you'll always rotate around the center, the left/top boundaries are:
var centerX = label.getX()+label.getWidth()/2;
var centerY = label.getY()+label.getHeight()/2;
var MinX = centerX - newWidth/2;
var MinY = centerY - newHeight/2;
[ Disclaimer: This is just off the top of my head--review it accordingly! ]

Categories