We Keep Coding

Creating complex clipping path for image?

I'm new to fabricjs (and to Javascript development in general). I am "porting" a legacy Flex/Actionscript project and need to enable the user to create a complex clipping path for an image.
My approach in Actionscript was to use the Actionscript Graphics class using BlendMode.ERASE to "erase" from the yellow base rectangle (i.e. give the appearance of erasing) and then using that set of rects to create a bitmap to serve as an alpha channel for the final image (Step 3) created on the fly.
Can anyone suggest how I might accomplish a similar functionality in Fabric? It doesn't seem to support HTML5 Canvas Blend modes and while I see that it supports clipping paths for images, I'm not seeing how I can enable the user to interactively create a clipping path without doing lots of intersection checks to try to derive the points to create a new path on the fly.
Thanks!
Step 1: After the user has drawn a base rectangle, drag-option/alt-key enables them to draw a rectangle (the red line) which will be subtracted from the base rect.
Step 2: The base rect is shown with the subtraction.
Step 3: The base rect is used to clip or mask a section of the base image
Step 1
Step 2
Step 3

Will Tower,
There is no easy way to do it. Here are the steps:
Draw 'Yellow' rectangle
Draw 'Red' rectangle
Use clipping library like PolyBool for intersection and xor operations
Convert drawing result into the clipped path of combining rectangles
clip your image
I created some quick fiddle. You have to click on a each button to clip. It won't clip if you will not add 2 rectangles on the canvas. This is very simple example. In order to work properly you have to draw rectangles with mouse (make them dynamic). Also, this logic is not accounting for these variations (you have to work on them as well):
For these use cases Clipping Library will return to you 2 set of results, which means different logic should be implemented.
Actual code without jQuery, FabriJs, and PolyBool libraries:
var imgURL = 'http://fabricjs.com/lib/pug.jpg';
var clipYellowRect = null;
var clipRedRect = null;
var pug = null;
var canvas = new fabric.Canvas('c');
// insert image into canvas
var pugImg = new Image();
pugImg.onload = function (img) {
pug = new fabric.Image(pugImg, {
angle: 0,
width: 500,
height: 500,
left: 100,
top: 50,
scaleX: 0.5,
scaleY: 0.5,
clipName: 'pug',
});
canvas.add(pug);
};
pugImg.src = imgURL;
//draw yellow rectangle
$('#btnYellowRect').on('click', function(){
clipYellowRect = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 120,
top: 60,
width: 200,
height: 200,
fill: 'rgba(255,255,0,0.5)',
strokeWidth: 0,
selectable: false
});
canvas.add(clipYellowRect);
});
//draw red rectangle
$('#btnRedRect').on('click', function(){
clipRedRect = new fabric.Rect({
originX: 'left',
originY: 'top',
left: 90,
top: 120,
width: 100,
height: 100,
strokeWidth: 3,
fill: 'transparent',
stroke: 'rgba(255,0,0,1)', /* use transparent for no fill */
strokeWidth: 0,
selectable: false
});
canvas.add(clipRedRect);
});
//clip
$('#btnClip').on('click', function(){
var yellowRectRegion = getRegion(clipYellowRect);
var redRectRegion = getRegion(clipRedRect);
//determine inersection
var intersectResult = PolyBool.intersect({
regions: [yellowRectRegion],
inverted: false
}, {
regions: [redRectRegion],
inverted: false
});
//generate clipping path
var xorResult = PolyBool.xor({
regions: [yellowRectRegion],
inverted: false
}, {
regions: intersectResult.regions,
inverted: false
});
clipImage(xorResult.regions[0]);
});
//prepare data for clipping library
function getRegion(rect){
return [[rect.left, rect.top],
[rect.left + rect.width, rect.top],
[rect.left + rect.width, rect.top + rect.height],
[rect.left, rect.top + rect.height]]
}
function clipImage(points){
//actual clipping
pug.clipTo = function (ctx) {
var scaleXTo1 = (1 / pug.scaleX);
var scaleYTo1 = (1 / pug.scaleY);
ctx.save();
var ctxLeft = -( pug.width / 2 );
var ctxTop = -( pug.height / 2 );
ctx.translate( ctxLeft, ctxTop );
ctx.scale(scaleXTo1, scaleYTo1);
ctx.beginPath();
console.log(points)
ctx.moveTo(points[0][0] - pug.oCoords.tl.x, points[0][1] - pug.oCoords.tl.y);
for (var i=1; i < points.length; i++){
ctx.lineTo(points[i][0] - pug.oCoords.tl.x, points[i][1] - pug.oCoords.tl.y);
}
ctx.closePath();
ctx.restore();
};
clipYellowRect.remove();
clipRedRect.remove();
canvas.renderAll();
}
Hopefully it will help you.

How does `getShift` and transform work on an SVG

I was just going though THIS SVG animation demo , its pritty straightforward , i was jus tgoing through the JS code and came actoss the below lines of code;
var g = Snap();
g.attr({
viewBox: [0, 0, 800, 600]
});
Snap.load("map.svg", function (f) {
function getShift(dot) {
return "t" + (400 - dot.x) + "," + (300 - dot.y);
}
var gr = f.select("g"),
wrd = f.select("#world").attr({fill: "#fff"}),
syd = f.select("#sydney").attr({fill: "red"}),
msk = f.select("#san_francisco").attr({fill: "red"}),
pth = f.select("#flight"),
pln = f.select("#plane"),
top = g.g()
// DIFF above line of code , what is g.g();
top.attr({
mask: g.rect(100, 0, 600, 600).attr({
fill: "r(.5,.5,.25)#fff-#000"
})
});
top.add(gr);
var click = top.text(410, 310, "click!").attr({
font: "20px Source Sans Pro, sans-serif",
fill: "#fff"
});
pth.attr({
display: "none"
});
// DIFF , i am not quite understanding below line of code.
pln = gr.g(pln, pln.clone());
pln.attr({
display: "none"
});
pln[0].attr({
stroke: "#fff",
strokeWidth: 2
});
gr.attr({
transform: getShift({
x: syd.attr("cx"),
y: syd.attr("cy")
})
});
Now my question is about the below lines of code:
gr.attr({
transform: getShift({
x: syd.attr("cx"),
y: syd.attr("cy")
})
});
I beleive the layer gr is being transform , but i don't entirely understand this line of code , What exactly is getShift and ofcourse i do understand that the 'cx' and 'cy' attributes of the syd layer above are being used to transform the elements, but how does this line of code work as a whole and also what is getShift ?

getShift itself has nothing to do specifically with the Snap library. It is defined in the top of the code you included, and simply returns a string based on an object you provide:
function getShift(dot) {
return "t" + (400 - dot.x) + "," + (300 - dot.y);
}
So if you call getShift with a parameter of an object with the following properties, {x: 10, y: 20}, then getShift will return the string "t380,290".
That string, however, can then be used by Snap to transform an element. Specifically, it is being used as follows:
gr.attr({transform: "t380,290"});
(based on my fictitious initial values).
It seems like what it's trying to do is the following: Translate the entire group ("gr") (i.e. the whole world map?) such that the position of Sydney, Australia ("syd") ends up at the coordinates (400, 300), i.e. in a pleasantly-viewable somewhat-central part of the screen/window/div. Without going through the entire code, it seems like this is probably setting up the characteristics for the end of the animation.

fabricjs How can i keep fixed size on group elements while others scaling?

Hello I use fabricjs to play with the html canvas.
I create the canvas and i add group of objects on it.
On a group of objects, I need to keep fixed width & height for some objects while I scale the object.
I use the 'object:scaling' event to get the active object when it changes size, I read each object of the group and I assign element[i].set({'radius':5}) on the group objects that I want to be unchanged.
But the result is that , all the group object to resize.
I show you the snippet of the object:scaling event :
canvas.on('object:scaling',function(e){
var activeObject1 = e.target;
var elements = e.target._objects;
var count_elements = elements.length;
for(var i = 0; i < count_elements; i++) {
var type = elements[i].typeCircle;
if(type == "parts"){
//elements[i].set({"radius":8,"fill":"#abcde2","stroke":"#367827"});
//elements[i].set('radius',8);
/*elements[i].setWidth(16);
elements[i].setHeight(16);
elements[i].currentWidth = 16;
elements[i].currentHeight = 16;
elements[i].scaleX = 1;
elements[i].scaleY = 1;
console.log(elements[i]);
canvas.renderAll();*/
}
}
});
What should I write into the for loop to keep fixed size on some objects?
everything that I used above, they don't work except for the "fill":"#abcde2","stroke":"#367827"
If anyone has faced something similar on fabricjs, please let me know .

You must use setScaleX() and setScaleY() methods.
Here is an example...
var Rect = new fabric.Rect({
width: 200,
height: 200,
top: 100,
left: 100,
fill: 'rgba(255,0,0,0.5)',
stroke: '#000',
strokeWidth: 1,
});
var Circle = new fabric.Circle({
left: 100,
top: 100,
fill: '#FF00FF',
stroke: 'red',
radius: 100,
opacity: 1,
});
var Group = new fabric.Group([Rect, Circle])
canvas.add(Group)
canvas.on({
'object:scaling': onChange
})
function onChange(obj) {
var circle = obj.target.item(1),
group = obj.target,
scaleX = circle.width / group.getWidth(),
scaleY = circle.height / group.getHeight();
circle.setScaleX(scaleX);
circle.setScaleY(scaleY);
}
JSFIDDLE

Using fabricjs2 to stop scaling of a text item I have modified Rafik Avtoyan's function to work well. I have locked Y scaling for my group so you will have to add this if required.
function handleScalingEvent(obj) {
var text = obj.target.item(1),
group = obj.target,
scaleX = group.width / (group.width * group.scaleX);
text.set('scaleX', scaleX);
}

Best way to make the objects the same size is to divide desired width by object width. For example, if you want all added objects to be 256px the code will look this way:
function selectImage(imagePath){
fabric.Image.fromURL(imagePath, function(oImg) {
canvas.add(oImg);
let zoom = 256 / oImg.width;
oImg.set({ scaleX: zoom, scaleY: zoom, });
oImg.center();
});
}
In the case when the image will be 64px it will scale it by 4 to 256px and in case the image is 512px it will scale it by 0.5 which will make the image smaller to 256px.

Tweened Kinetic.js shape doesn't fire most of clicks

Purpose
I'm making a simple "shoot the word" game, where user needs to click on some moving rectangles with words to "shoot" them.
Problem
So i create some objects and move them using simple kinetic.js tweening.
Word creation
function createWord(value){
//here comes some word object construction
var wordGroup = new Kinetic.Group({
x: 0,
y: 0
});
var padding = 10;
wordGroup.label = new Kinetic.Text({
x: padding,
y: padding,
text: value,
fontFamily: 'Times New Roman',
fontSize: 30,
fill: 'white'
});
wordGroup.tag = new Kinetic.Rect({
x: 0,
y: 0,
width: wordGroup.label.width() + (padding << 1),
height: wordGroup.label.height() + (padding << 1),
fill: 'black',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: {x:10,y:20},
shadowOpacity: 0.5,
cornerRadius: 10
});
wordGroup.add(wordGroup.tag);
wordGroup.add(wordGroup.label);
wordGroup.shoot = function(){ //shooting mechanism (simple stop from moving and remove from scene)
wordGroup.tween.pause();
wordGroup.clean();
dropNextWord(); //drops fresh blood! (new word instead of shooted)
}
wordGroup.clean = function(){ //remove from scene and set it free to drop again
wordGroup.remove();
wordGroup.isActive = false;
}
wordGroup.move = function(callback){ //animates word
wordLayer.add(wordGroup);
moveToSide(wordGroup, callback); //calls moving function
}
wordGroup.on('click', function(e){
wordGroup.shoot();
});
return wordGroup;
}
Tweening part
//move word to opposite side
function moveToSide(word, callback){
var side = Math.random();
var d = 100;
spawnFromSide(word, side); //set random side word position
tweenPosition = {
x: word.x(),
y: word.y()
}
if(side < 0.25){ //left
tweenPosition.x = - d;
} else if(side > 0.25 && side < 0.5){ //right
tweenPosition.x = defaultStageWidth + d;
} else if(side > 0.5 && side < 0.75){ //up
tweenPosition.y = - d;
} else { //down
tweenPosition.y = defaultStageHeight + d;
}
word.tween = new Kinetic.Tween({
node: word,
duration: 4,
easing: Kinetic.Easings.Linear,
x: tweenPosition.x,
y: tweenPosition.y,
onFinish: function(){
word.clean();
callback();
}
});
word.tween.play();
}
But the problem is that click event doesn't fire on large amount of user clicks. As i think, this caused by delayed drawHit() calls inside tweening mechanism, that draws new object position before updating the hit area, so when we shoot object thinking that we hit its current position we miss because its hit area still have the same old position.
Live example
http://jsfiddle.net/hd6z21de/7/
Take a minute on shooting to see this effect in action

Solved this weird behavior by listening canvas touches and check if pointer collide some target word-rect by myself instead of using their own onclick events.
//i listen to canvas because of my app specific, you could simple listen your own layer or even document
$("canvas").bind('click', function(event){
var x = (event.pageX) / stage.scaleX(); //you don't need to divide by scale if your stage isn't scaled as mine does
var y = (event.pageY) / stage.scaleY();
var wordArray = wordGroup.getChildren();
for(var i = 0; i < wordArray.length; i++){ //go through all words and check if we shoot someone (is mouse position included in some word rect)
if(x > wordArray[i].x() &&
y > wordArray[i].y() &&
x < (wordArray[i].x() + wordArray[i].width()) &&
y < (wordArray[i].y() + wordArray[i].height())){
wordArray[i].shoot(); //shoot that word
break;
}
}
}

Kineticjs Dragend - How to Store results of getPosition()

I am new to Kineticjs and not a great javascript coder so I am hoping to get some help with this example.
http://jsfiddle.net/pwM8M/
I am trying to store the x axis on doors so when a redraw unrelated to the doors is done they don't go back to the default position. (multiple types of doors and windows too)
Each form element can have multiple quantities (more than one door) so I need a way to store/retrieve the data currently contained in the alert on jsfiddle.
I did some research but have come up empty. Can anyone help with what I have provided?
function OH(x,y,w,h) {
var oh = new Kinetic.Text({
x:x,
y: y,
width: w*scale,
height: h*scale,
stroke: wtc,
strokeWidth: 1,
fill: 'brown',
fontSize: 6,
fontFamily: 'Calibri',
padding:4,
text: w+' x '+h+' OH\n\n<- DRAG ->',
align: 'center',
textFill: 'white',
draggable: true,
dragConstraint:'horizontal',
dragBounds: {
left:xoffset, right: xoffset+width+length-(w*scale)
}
});
oh.on('dragend', function(e) {
alert(oh.getPosition().x);
});
window.south.add(oh);
}
Thanks,

I have fixed sized 40x40 rectangle here in which i am using dragging function. try this
var box = new Kinetic.Rect({
x: parseFloat(area.size.x),
y: parseFloat(area.size.y),
width: 40, //parseFloat(area.size.width)
height: 40,
fill: area.color,
stroke: 'black',
strokeWidth: 1,
opacity: 0.6,
id : area.id + id,
draggable: true,
dragBoundFunc: function(pos) {
// x
var newX = pos.x < 0 ? 40 : pos.x;
var newX = newX > _self.canvasWidth - area.size.width ? _self.canvasWidth - area.size.width : newX;
// y
var newY = pos.y < 0 ? 40 : pos.y;
var newY = newY > _self.canvasHeight - area.size.height ? _self.canvasHeight - area.size.height : newY;
return {
x: newX,
y: newY
};
Use this function
box.on('dragend', function() {
_self.draw = false;
_self.dragArea(area, box);
});
and try this to play with x y coordinates
dragArea: function(area, box){
if(box){
$$('#' + this.formId + ' [name="areas[' + area.id + '][size][x]"]').first().value = parseInt(box.attrs.x);
$$('#' + this.formId + ' [name="areas[' + area.id + '][size][y]"]').first().value = parseInt(box.attrs.y);
area.size.x = parseInt(box.attrs.x);
area.size.y = parseInt(box.attrs.y);
}
},

Create a new array before the function, like so:
var xArray = new Array();
then inside your function
oh.on('dragend', function(e) {
alert(oh.getPosition().x);
// ADD NEW ITEM TO ARRAY, STORE X POSITION
xArray.push(oh.getPosition().x);
});
and so all the x values get stored in the array.
If you need to clear the array, you can simply create a new one again with the same name.
And you can iterate through it with a loop if needed.
updated:
http://jsfiddle.net/pwM8M/2/