I want to use fabricjs with require. I have other projects where i'm using requirejs so everything is configured right.
fabricjs is build with require support. I'm not clear why in dist file i have generated fabric.require.js and fabric.js but i tested all and not work.
Sample code (essential part):
define(['fabric','jquery'], function (fabric,$) {
function Graph(config) {
var canvas = new fabric.Canvas('mycanvas');
var circle = new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
});
}
return Graph;
});
When i try to run this i got error: fabric.Canvas is not a function.
What is strange, when comment line where fabric.Canvas is invoked, code run without error so it's like fabric.Circle call is ok.
Where is the problem?
I found the answer. When i build fabric, need to add and interaction module, so right command was:
node build.js requirejs modules=interaction
Now error was gone!
Related
I'm building a software using express-mongodb-ejs. I've tried some of the npm packages to generate and download pdf. But, I cant generate pdf which having the dynamic image path.
I've used html-pdf package, which seems pretty good. But, It can't render the dynamic image path from database.
Here is the screenshot where I used the html-pdf package.
Here is the detailed problem link where I asked about this package related question.
Can anyone provide me any detailed solution regarding the problem? Any npm package should be fine as long as it can help me to download pdf using express.
You may use a popular node module called pdfkit. Please run the below program and check it. You need an image with the name pro.jpg in the same folder that you run the script. It will generate an output.pdf file.
Here is the example:
const PDFDocument = require('pdfkit');
const fs = require('fs');
// Create a document
const doc = new PDFDocument();
// Pipe its output somewhere, like to a file or HTTP response
// See below for browser usage
doc.pipe(fs.createWriteStream('output.pdf'));
// Add an image, constrain it to a given size, and center it vertically and horizontally
doc.image('pro.jpg', {
fit: [250, 300],
align: 'center',
valign: 'center'
});
// Add another page
doc
.addPage()
.fontSize(25)
.text('Here is some vector graphics...', 100, 100);
// Draw a triangle
doc
.save()
.moveTo(100, 150)
.lineTo(100, 250)
.lineTo(200, 250)
.fill('#FF3300');
// Apply some transforms and render an SVG path with the 'even-odd' fill rule
doc
.scale(0.6)
.translate(470, -380)
.path('M 250,75 L 323,301 131,161 369,161 177,301 z')
.fill('red', 'even-odd')
.restore();
// Add some text with annotations
doc
.addPage()
.fillColor('blue')
.text('Here is a link!', 100, 100)
.underline(100, 100, 160, 27, { color: '#0000FF' })
.link(100, 100, 160, 27, 'http://google.com/');
// Finalize PDF file
doc.end();
Problem
When you use fabric js for generating text components and convert then to SVG.
I want to see the problem and try reproduce and/or resolve
----->Please check first comment <-----
How to use demo to reproduce
Open Url of demo
Run it
Click on add text component it will add English test text component.
Now change the text by double click and paste this for example arabic word شريف
Open your browser inspector.
click on print to console button .
Expected result
To look like this
This is fixed in newer version. Update to v2.3.3 (latest) , your fabricjs version v1.5 is too old and its not maintained any more.
find latest here
fabric.js website
DEMO
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setDimensions({
width:400,height:400
})
text = new fabric.IText('شريف', {
left: 50,
top: 100,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
})
canvas.add(text);
console.log(text.toSVG());
function printtest(){
console.log(text.toSVG());
}
#c{
border:1px solid red;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="printtest()">print console</button><br>
<canvas id="c"></canvas>
I have clipped an image using clipto method of fabricjs and this works fine. But the problem is boudingrect is still to the actual image area. Is there any way to reset boundingrect same as new cropped image? I tried setCoords but this does not work.
FabricJS has two methods available to "crop" an object, the one you are using clipTo(), and a toDataURL() method. Using toDataURL() creates a new image with a reset boundingrect same as new cropped image.
fabric.Image.fromURL('data:image/;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAACa0lEQVRYhbVXMW7bQBAcMgRTWCJdC+qFOLAaudFDnEKdYL1AfoCRB8gvkJJUAQw/RI3cSIBg13ZShzxWBEK6sEjf7e3dkYC8Fckhduf2doZHryzLEpY4e/mp3M+jEW7TB/bdq+457rMnpGVeP9v3p7b08K0oE7NoiHk0Yotfxxdt07UnsEy3Gomq+F32qKy+SQRtCVTtn0VDAEBS5nXx7//WbdPpBOQ9/3YywDwaYRYNsUy3dfHksMquHwLF27uieF+53JFFssFK7Gps3Zsg9j+bCcjFb07H+PrnFwD3ik14NYQyCWsH5OKe5wHQ206Lu/BqODkSGgFanBbp+iG71y7cpBDvy/MPxQeozmUdL9Nt3WIuOFyeKc4ntA5UbaRmIw8htyIXXg3mffakPNd8gNM5Tb4SOyySTWPc5hNaB+hA0eRyEQCIvdCKy8W52fDn0Qj7/lRZsazzxOJsosideOyF9XUVV91z7PtT3JyOEbiczaRjqhYT7vKRAGivY1rchdvy1zPQVMeiyFmfcOGm/MoQJmVeezsXsRcCPrTkTXEuf02Afs8/ygdo/kAG77JHiCLXzIjTuVzEhdvyByadfrQPVPmDldhpEpJ94OV/piWvQhS59Uwlihz9T533dw9xmz6oWyAHZXxsH6Dd0ghw7TqmDyzFzv41NHn2sXyAhkf/CxbJxvo9Nw2dCafnicvOwH4mpBKSk9t8oqmPXHYGynP2TNhGx01wk5SNBGQSLh27Tsm24iyBdW+i3I///rb6BPdfIOt83ZsobY8O5wMjAXlAuHB1hK7Wla/1rxlX3KZzV7QmYPIJ2z7b4hVhK2M6UYICmwAAAABJRU5ErkJggg==', function(origImage) {
var origBoundingRect = origImage.getBoundingRect();
fabric.Image.fromURL(origImage.toDataURL({
width: origImage.width - 5,
height: origImage.height - 5
}), function(newImage) {
var newBoundingRect = newImage.getBoundingRect();
console.log('origBoundingRect:\r\n' + JSON.stringify(origBoundingRect) + '\r\n\r\n' + 'newBoundingRect:\r\n' + JSON.stringify(newBoundingRect));
});
});
<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.7/fabric.min.js"></script>
If you run the code snip-it above it logs to the console a before and after shot of the boundingrect.
Hope this helps, matey. Let me know if you have any further questions.
I had working javascript code that added layers to a leaflet map in a jade file within a node.js express framework. I moved the javascript to a separate file and included it along with all the necessary passed variables
script(src='/javascripts/Chart.js')
script.
var spreadsheetData =!{JSON.stringify(spreadsheetData)};
var lat = !{JSON.stringify(lat)};
var lng = !{JSON.stringify(lng)};
console.log("hi");
script(src='/javascripts/script.js')
The variables pass perfectly, all the console.logs print data out the same way, but for some reason, the layers are not printing visibly onto the leaflet map. I see the map, without any of the zipcode areas filled in. jquery works just fine in the file. What could be going wrong? the javascript file the code goes into is wrapped in $(document).ready(function () {}); There are no console errors.
This wont add:
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(mymap);
Markers are visible / add
var marker = L.marker([51.5, -0.09]).addTo(mymap);
This is not Drawing Mode.
I want according to some condition to be able to change the cursor when I am over some element. Something like
$('#canvasID').css('cursor','pointer');
but this is not working for me. Do you know some property from their library?
After some tests this is working for me:
canvas.observe('mouse:over', function (e) {
if (e.target.get('type') == 'line') {
e.target.hoverCursor = 'crosshair';
}
});
FabricJS have an in-built mechanism for setting custom cursor (unfortunatelly only for hover and move events):
var canvas = new fabric.Canvas('myCanvas');
var circle = new fabric.Circle({
radius: 20, fill: 'red', left: 10, top: 10
});
circle.hoverCursor = 'no-drop';
canvas.add(circle);
More cursor types you can find here.