I have a problem with fabric.js. I can use fabric.version, but after new fabric.Rect{top : 100,left : 100,width : 120,height : 30, fill : 'red'} and use canvas .add it, the rect not show but mouseEvent is ok.
my fabric.js version is 3.4.0
#angular/core": "~7.2.0","fabric": "^3.4.0"
ngOnInit() {
let canva1 = new fabric.Canvas('myCanvas');
console.log(fabric.version);
let rect = new fabric.Rect({
top : 100,
left : 100,
width : 120,
height : 30,
fill : 'red'
});
canva1.add(rect);
}
I expect a rect show on the canvas but no rect show
You have style="background: white" on your canvas element and it just blends with the background.
https://github.com/zhangManGod/canvas/blob/master/src/app/right/right.component.html#L3
Unless you have created your canvas with renderOnAddRemove = true (http://fabricjs.com/docs/fabric.Canvas.html#renderOnAddRemove) then you will need to call requestRenderAll on your canvas after you have added or removed items(s).
(http://fabricjs.com/docs/fabric.Canvas.html#requestRenderAll)
ngOnInit()
{
let canva1 = new fabric.Canvas('myCanvas');
console.log(fabric.version);
let rect = new fabric.Rect(
{
top : 100,
left : 100,
width : 120,
height : 30,
fill : 'red'
});
canva1.add(rect);
canva1.requestRenderAll()
}
Related
i use zoomtopoint and zoom to object. but not working with background.
I want to zoom in on the object and the background. How can i ?
Example :
object size : 100x100 not zoom.
after zoom object size :100x100
after zoom and The grid remained the same.
zoom event
document.addEventListener('wheel', function(event) {
var evt = window.event || event;
var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
var curZoom = canvas.getZoom();
var newZoom = curZoom + delta / 4000;
var x = event.offsetX;
var y = event.offsetY;
canvas.zoomToPoint({ x: x, y: y }, newZoom);
if(event != null)event.preventDefault();
return false;
canvas.calcOffset();
}, false);
grid code:
canvas.setBackgroundColor({source: src, repeat: 'repeat'}, canvas.renderAll.bind(canvas), function () {
canvas.renderAll();
proceed();
});
EDİT
#canvas-background { display: inline-block; position: absolute; top: 0; right: 0; }
but i dont use css.
Background image
Thank you
Sorry, i cant speak english well.
Relevant code is below (and the rest is in the JSFiddle), note the canvas size and CSS container trick used to allow zooming out.
Example : object size : 100x100 not zoom.
after zoom object size :100x100
after zoom and The grid is no longer the same.
fabric.Image.fromURL('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASdEVYdFNvZnR3YXJlAEdyZWVuc2hvdF5VCAUAAADLSURBVFhH7ZnBCoMwEET9/68URBHSNj0UolFoI+aQickKlT05jz0MGQIPkb2kadu3ta42ff/MTtLRazct55bajOMjO0lHr920vnWMMTGV0GuphVALoRaiqNV1dq4TLsdUIrTe+z0fw+ndmEo0w/D61AmXYyqh1179WjGVuNLyl0eohVALuZ8Wtzwgt9zyiNxSC6EWQi1EUYtbHpBbbnlEbqmFUAuhFqKoxS0PyC23PCK31EKohVAL0dXK3vLSOX0TnKZ1z8fw/3uiW37L27QIZwrV4gAAAABJRU5ErkJggg==', function(img) {
var patternSourceCanvas = new fabric.StaticCanvas();
patternSourceCanvas.add(img);
var pattern = new fabric.Pattern({
source: function() {
patternSourceCanvas.setDimensions({
width: img.getWidth(),
height: img.getHeight()
});
return patternSourceCanvas.getElement();
},
repeat: 'repeat'
});
var background = new fabric.Rect({
width: canvas.getWidth(),
height: canvas.getHeight(),
fill: pattern,
selectable: false
});
canvas.add(background, rectangle);
canvas.renderAll();
});
Here's a working JSFiddle, https://jsfiddle.net/rekrah/86t2b8bs/.
Hope this helps.
UPDATE:
#forguta also wanted to ensure objects didn't go behind the background when sendToBack() was run. Made "repeated" background image into one image so setBackgroundImage() could be used (image size only increased to 64K and I'm sure could be compressed further).
Simpler code:
canvas.setBackgroundImage('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACcQAAAnECAIAAAChEWJqAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4QMDDwYflNda9wAAIABJREFUeNrs2TGO67qWhlHSotSFm7z5z+4NoQsoXJbFs8HObYoGbJxmslYk4JfgD053/u9///............', canvas.renderAll.bind(canvas), {
// Needed to position backgroundImage at 0/0
originX: 'left',
originY: 'top'
});
Here's an updated working JSFiddle, https://jsfiddle.net/rekrah/u0srdsdr/.
The problem is to update the actual object.width, object.height and keep object.scaleX = 1 and object.scaleY = 1 when using the visual controls on the canvas.
The origin of the problem is when manipulating the object using controls, fabric.js changes the scale of the object, as well as scaling the stroke of paths, which I would like to be of the same width always.
So I would like to make it more like Adobe Illustrator-like, and not scale the width of the stroke along with the width of the rectalngular, for example.
I have found a solution to a question formulated in a different manner here:
Rect with stroke, the stroke line is mis-transformed when scaled
The idea is to calculate the new would-be width and height using the new scale factors, set the new dimensions and reset the scale factors to 1.
Here's the code example from that answer:
el.on({
'scaling': function(e) {
var obj = this,
w = obj.width * obj.scaleX,
h = obj.height * obj.scaleY,
s = obj.strokeWidth;
obj.set({
'height' : h,
'width' : w,
'scaleX' : 1,
'scaleY' : 1
});
}
});
From Fabric.js version 2.7.0 you can enable a strokeUniform property on the object this will always match the exact pixel size entered for stroke width.
var circle2 = new fabric.Circle({
radius: 65,
fill: '#4FC3F7',
left: 110,
opacity: 0.7,
stroke: 'blue',
strokeWidth: 3,
strokeUniform: true
});
http://fabricjs.com/stroke-uniform
I use KineticJs and want to crop an existing image. I tried the following:
var image = new Kinetic.Image({}); // some kinetic image
var layer = new Kinetic.Layer();
var stage = new Kinetic.Stage({
container: "iPhone",
width: 1000,
height: 1000
});
image.crop({
x: 0,
y : 0,
width : 100,
height : 100
});
image = image.crop();
layer.add(image);
layer.draw();
stage.add(layer);
The former does not work. How do I crop an existing image with KineticJs?
You should pass javascript object with x, y, width and height properties to crop function:
image.crop({
x: 10,
y : 10,
width : 66,
height : 60
});
http://jsbin.com/zubek/2/edit
I am trying to do an interactive drawing using Fabric.js. Now I can draw a rectangle by using mouse. But after I finish drawing the rectangle, I can not select it unless I resize it once by using the left top controller after drawing. I wonder what break the event system.
Here is my code: http://jsfiddle.net/rmFgX/1/
var canvas = new fabric.Canvas('canvas');
var rect = new fabric.Rect({
top : 100,
left : 100,
width : 60,
height : 70,
fill : 'red'
});
canvas.add(rect);
canvas.on('mouse:down', function (option) {
console.log(option);
if (typeof option.target != "undefined") {
return;
} else {
var startY = option.e.offsetY,
startX = option.e.offsetX;
console.log(startX, startY);
var rect2 = new fabric.Rect({
top : startY,
left : startX,
width : 0,
height : 0,
fill : 'transparent',
stroke: 'red',
strokewidth: 4
});
canvas.add(rect2);
console.log("added");
canvas.on('mouse:move', function (option) {
var e = option.e;
rect2.set('width', e.offsetX - startX);
rect2.set('height', e.offsetY - startY);
rect2.saveState();
});
}
});
canvas.on('mouse:up', function () {
canvas.off('mouse:move');
});
updated the fiddle http://jsfiddle.net/rmFgX/5/
For an object when changing position/dimension -related properties (left, top, scale, angle, etc.) set does not update position of object's borders/controls.
If you need to update those, call:
setCoords().
Im running into this strange problem..! I've a kineticJS text element and I'm converting it into image.. Here is the Code
var simpleText = new Kinetic.Text({
x: 50,
y: 50,
text: $("#text").val(),
fontSize: $("#fontSize").val(),
fontFamily: $("#fontName").val(),
fill: $("#fontColor").val(),
});
var twidth = simpleText.getWidth();
var theight = simpleText.getHeight();
simpleText.toImage({
width:twidth,
height:theight,
callback: function(img){
var textImg = new Kinetic.Image({
image: img,
x: 0,
y: 0,
width: twidth,
height: theight,
name: 'image',
stroke: 'red',
strokeWidth: 2,
strokeEnabled: false
});
addElement(textImg, textImg.getWidth(), textImg.getHeight());
}
});
So the problem exist here..!
var twidth = simpleText.getWidth();
var theight = simpleText.getHeight();
If I just put the width and height in numeric form, everything works fine and text is converted, something like this
var twidth = 500;
var theight = 100;
But if I use simpleText.getWidth() and simpleText.getHeight(), nothing happens, the image is created but it doesn't have that TEXT. As I saw in documentation, width and height are optional params for toImage(), so I removed now, but now its show this error..
Uncaught TypeError: Cannot read property 'bufferCanvas' of undefined
kinetic.js:28 Kinetic.Node.toDataURL kinetic.js:28
Kinetic.Node.toImage kinetic.js:28 add_text canvas.js:83 (anonymous
function) canvas.js:352 f.event.dispatch jquery.min.js:3 h.handle.i
any idea whats wrong with my code?
I am not shure is it bug or feature. But problem is: picture are taken from rectangle with this coordinates: {x:0 y:0}; width and height - what you insert as toImage params. (twidth, theight)
But text has coords {x : 50, y : 50}. So it is outside of "picture" rectagle above.
As you say if yor increase width and height:
var twidth = 500;
var theight = 100;
Everything is fine and you will see text, but image will be big with empty space.
So... just insert "x" and "y" params to toImage function:
simpleText.toImage({
width:twidth,
height:theight,
x : 50,
y : 50,
callback: function(img){
$('body').append($(img));
}
});
example: http://jsfiddle.net/lavrton/hgax2/