I am trying to merge textbox and group in fabricjs
when I set text, It doesn't show full text.
how to set full text?
var iText4 = new fabric.Textbox('Text noasasasasasasasasasabcdefghxyz', {
left: 50,
top: 100,
fontFamily: 'Helvetica',
width: 30,
styles: {
0: {
0: { textBackgroundColor: 'blue', fill: 'green' },
1: { textBackgroundColor: '#faa' },
2: { textBackgroundColor: 'lightblue' },
}
}
});
var group = new fabric.Group([ iText4 ], {
left: 150,
top: 100,
width: 60,
});
var canvas = new fabric.Canvas('c');
canvas.add(group);
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id='c' width='500' height='400'></canvas>
The group's width is smaller than the text's width, causing it to be cut off. Removing it should solve your problem.
var group = new fabric.Group([ iText4 ], {
left: 150,
top: 100
});
See here: https://jsfiddle.net/p6c2trg8/1/
Related
I'm using the fabricjs animate function to change the opacity of text elements on a canvas.
For every frame, I need to check for elements with 0% opacity and remove them with canvas.remove.
At the moment, I've come up with this code which I'm running for each fire of requestAnimationFrame:
canvas.getObjects().filter((obj) => obj.get("opacity") === 0).forEach(canvas.remove)
However, when iterating, filtering through the items and running canvas.remove, I'm getting Uncaught TypeError: Cannot read property 'indexOf' of undefined.
Here's a simple implementation of this problem (not the actual code):
const canvas = new fabric.StaticCanvas(document.querySelector("canvas"), { backgroundColor: "black" })
// CODE HERE:
function removalLogic() {
canvas.getObjects().filter((obj) => obj.get("opacity") === 0).forEach(canvas.remove)
}
const rect = new fabric.Rect({
width: 100, height: 100,
left: 10, top: 20,
fill: "grey",
})
canvas.add(rect)
rect.animate("opacity", "0", {
duration: 2500,
onChange: canvas.renderAll.bind(canvas),
onComplete: removalLogic,
})
<canvas height="512" width="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
Use .map() to iterate over all the objects of canvas.
Use canvas.remove(obj) to remove the object.
This statement of yours was incorrect obj.get("opacity") === 0).forEach
const canvas = new fabric.StaticCanvas(document.querySelector("canvas"), { backgroundColor: "black" })
// CODE HERE:
function removalLogic() {
console.log(canvas.getObjects().length);
canvas.getObjects().map((obj) => ((obj.get("opacity") == 0)? canvas.remove(obj) :''))
console.log(canvas.getObjects().length);
}
const rect = new fabric.Rect({
width: 100, height: 100,
left: 10, top: 20,
fill: "grey",
})
canvas.add(rect)
rect.animate("opacity", "0", {
duration: 2500,
onChange: canvas.renderAll.bind(canvas),
onComplete: removalLogic,
})
<canvas height="512" width="512"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
I try to add label when user hover element:
var rect = new fabric.Rect({
originX: 'top',
originY: 'top',
width: 150,
height: 120,
fill: 'rgba(255,0,0,0.5)',
transparentCorners: true
});
var text = new fabric.Text('hello world', {
fontSize: 30,
originX: 'top',
originY: 'top'
});
canvas.on('mouse:over', function(e) {
var group = new fabric.Group([ rect, text ], {
left: e.target.left,
top: e.target.top
});
canvas.add(group);
canvas.renderAll();
});
canvas.on('mouse:out', function(e) {
//e.target.set('fill', 'green');
canvas.remove(group);
canvas.renderAll();
});
But when mouse:out fires i get:
Uncaught ReferenceError: group is not defined
at i.<anonymous> (can.js:38)
at i.r (fabric.min.js:1)
at i._fireOverOutEvents (fabric.min.js:3)
at i.findTarget (fabric.min.js:3)
at i.__onMouseMove (fabric.min.js:4)
at i._onMouseMove (fabric.min.js:4)
How can i make a group global with left and top of hovered element, or there is a better way to do that?
group is scoped as a private variable local to the mouse:over event. Try
removing var from:
var group = new fabric.Group([ rect, text ], {
to scope group globally:
group = new fabric.Group([ rect, text ], {
DEMO
var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
originX: 'top',
originY: 'top',
width: 150,
height: 120,
fill: 'rgba(255,0,0,0.5)',
});
var text = new fabric.Text('hello world', {
fontSize: 30,
originX: 'top',
originY: 'top'
});
var group = new fabric.Group([ rect, text ], {
left: 0,
top: 0,
selectable : false,
visible: false,
});
canvas.add(group);
canvas.renderAll();
canvas.on('mouse:move', function(e) {
var p = canvas.getPointer(e.e);
group.set({
left: p.x,
top: p.y,
visible: true
});
canvas.renderAll();
});
canvas.on('mouse:out', function(e) {
group.set({
visible: false
})
canvas.renderAll();
});
canvas {
border:2px dotted blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.17/fabric.min.js"></script>
<canvas id='c' width=400 height=400></canvas>
You no need to create group on every mouse over, you just set visible: true/false, so according to this it will visible. Check DEMO.
In stencils we have png, on drop to paper we replace cell[png] with svg.
cell - represents png
vectorString - markup of png
var currentSvg = new joint.shapes.basic.pwmeter({
position: { x: bbox.x, y: bbox.y },
size: { height: cell.attributes.minHeight, width: cell.attributes.minWidth },
minWidth: cell.attributes.minWidth,
minHeight: cell.attributes.minHeight,
markup: vectorString,
type: cell.attributes.type,
fileName: cell.attributes.fileName,
isInteractive: true,
elementClassName: cell.attributes.elementClassName,
isAnimatedDevice: cell.attributes.isAnimatedDevice,
attrs: {
'.myClass': {
fill: '#ffffff',
stroke: '#000000'
}
}
});
currentSvg.addTo(Rappid.graph);
we are making pwmeter by extending Image
joint.shapes.basic.pwmeter = joint.shapes.basic.Image.extend({
type: 'basic.pwmeter',
initialize: function () {
return joint.shapes.basic.Image.prototype.initialize.apply(this, arguments);
}
});
We drop png from stencils to paper, and get svg markup for corresponding png,
we call currentSvg.addTo(Rappid.graph), during execution of this, all text in meter [svg] are replaced by blank.
our text - 0
auto generated code replaces my text, we are not able to figure out why this is happening
-
above is the generated text
We are new to jointjs, we think we are doing something wrong during extending.
I can see there is a markup in you settings. Make sure there is a text 'placeholder' in the markup.
in this example attr text is tied with the <text/> element
new joint.shapes.basic.pwmeter({
markup: '<g><image/><text/></g>',
attrs: {
text: { text: '48x48' },
image: { 'xlink:href': 'http://placehold.it/48x48', width: 48, height: 48 }
},
size: { width : 50, height: 50 },
position: { x:200, y: 50},
}).addTo(graph)
but in here, attr text has no matching element in the markup, therefore it won't be rendered.
new joint.shapes.basic.pwmeter({
markup: '<g><image/></g>',
attrs: {
text: { text: '90x90' },
image: { 'xlink:href': 'http://placehold.it/90x90', width: 90, height: 90 }
},
size: { width : 90, height: 90 },
position: { x:50, y: 50},
}).addTo(graph)
more information about attr property could be found here http://resources.jointjs.com/docs/jointjs/v1.0/joint.html#joint.dia.Element.presentation
I'm new with jointjs and I try to constraint a rectangle with ports to a line.
I tried to reproduce tutorial, that works with a basic.Circle, with a basic.Rect but not with devs.Model
Could someone explian me why and how to solve this problem?
Many thanks in advance!
Here is my code :
var width=400, height=1000;
var ConstraintElementView = joint.dia.ElementView.extend({
pointermove: function(evt, x, y) {
joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
}
});
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#myholder'), width: width, height: height, gridSize: 1, model: graph, elementView: ConstraintElementView});
var m1 = new joint.shapes.devs.Model({
position: { x: 20, y: 20 },
size: { width: 90, height: 90 },
inPorts: [''],
outPorts: [''],
attrs: {
'.label': { text: 'Model', 'ref-x': .4, 'ref-y': .2 },
rect: { fill: '#2ECC71' },
'.inPorts circle': { fill: '#16A085' },
'.outPorts circle': { fill: '#E74C3C' }
}
});
var m2=m1.clone();
m2.translate(0,300);
var earth = new joint.shapes.basic.Circle({
position: { x: 100, y: 20 },
size: { width: 20, height: 20 },
attrs: { text: { text: 'earth' }, circle: { fill: '#2ECC71' } },
name: 'earth'
});
graph.addCell([m1, m2, earth]);
Why does it not work?
devs.Model is not rendered via ContraintElementView to the paper.
devs.Model uses devs.ModelView for rendering, basic.Circle and basic.Rect use ContraintElementView.
JointJS dia.Paper searches for a view defined in the same namespace as the model first. If found, it uses it. It uses one from the paper elementView option otherwise. i.e. joint.shapes.devs.ModelView found for devs.Model but no view found for basic.Circle (no joint.shapes.basic.RectView is defined)
How to make it work?
define elementView paper option as a function. In that case paper don't search the namespace and uses the result of the function first.
Note that in order to render ports devs.ModelView is still required.
i.e.
var paper = new joint.dia.Paper({
elementView: function(model) {
if (model instanceof joint.shapes.devs.Model) {
// extend the ModelView with the constraining method.
return joint.shapes.devs.ModelView.extend({
pointermove: function(evt, x, y) {
joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
}
});
}
return ConstraintElementView;
}
});
http://jsfiddle.net/kumilingus/0bjqg4ow/
What is the recommended way to do that?
JointJS v0.9.7+
not to use custom views that restrict elements movement
use restrictTranslate paper option instead.
i.e.
var paper = new joint.dia.Paper({
restrictTranslate: function(elementView) {
// returns an area the elementView can move around.
return { x: 100, y: 0, width: 0, height: 1000 }
};
});
http://jsfiddle.net/kumilingus/atbcujxr/
I think this could help you :
http://jointjs.com/demos/devs
I have an FSA in joint.js, and I need to make the states (circles) semi-filled to specific ratios, like 1/2 or 1/6, starting from the bottom of the circle. The tricky part is that it needs to be done twice - A larger semi-fill and a smaller semi-fill over it.
This is what i am trying to do:
I'm lost as to how to accomplish this.
The trick is to create three SVG circles and define clip paths for them. The following example creates a custom JointJS shape (inheriting from fsa.State) with custom SVG markup that enables the coloring that you have shown in the image:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({ el: $('#paper'), width: 650, height: 400, model: graph });
joint.shapes.fsa.MyState = joint.shapes.fsa.State.extend({
markup: [
'<g class="rotatable"><g class="scalable">',
'<clipPath id="clip-top1"><rect x="-30" y="0" width="60" height="30"/></clipPath>',
'<clipPath id="clip-top2"><rect x="-30" y="15" width="60" height="30"/></clipPath>',
'<circle class="a"/><circle class="b"/><circle class="c"/>',
'</g><text/></g>'
].join(''),
defaults: joint.util.deepSupplement({
type: 'fsa.MyState',
size: { width: 60, height: 60 },
attrs: {
'circle': { fill: 'white' },
'.b': { fill: 'red', 'clip-path': 'url(#clip-top1)' },
'.c': { fill: 'blue', 'clip-path': 'url(#clip-top2)' }
}
}, joint.shapes.fsa.State.prototype.defaults)
});
var mystate1 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 50 },
size: { width: 100, height: 100 },
attrs: { text: { text: 'my state 1' } }
});
graph.addCell(mystate1);
var mystate2 = new joint.shapes.fsa.MyState({
position: { x: 50, y: 160 },
size: { width: 50, height: 50 }
});
graph.addCell(mystate2);