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>
Related
When I generated my application with Jhipster 6.4.1, with bootswatch template, the navbar did not appear correctly. We cannot see the menu items like "Home", "Language", "Account"
I've got the same problem installing jhipster with angular and unity theme.
The color of the menu is the same color of the navbar. The menu only appears with overfly.
I've just modified the
src/main/webapp/content/scss/global.scss
or
src/main/webapp/content/css/global.css if you don't use Sass option
I just had on top of the file :
/*==============================================================
wrong Bootswatch color use correction
===============================================================*/
.navbar-brand {
color: white;
}
.navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.5);
}
and voila !! my navbar menu appeard again !
I'm using puppeteer to generate a PDF file for my report view and I want to add a watermark on that report PDF version. Is there anyway that I can do that?
The easiest way to do it, is to add an additional element to the page, which represents the watermark when the PDF is created. As you can change the page in any way you like, you could add a "Watermark" element to the page like this:
await page.evaluate(() => {
const div = document.createElement('div');
div.innerHTML = 'Watermark Text...';
div.style.cssText = "position: fixed; bottom: 10px; right: 10px; background: red; z-index: 10000";
document.body.appendChild(div);
});
await page.pdf(/* ... */);
The code adds a fixed element to the bottom right of the page. When printed it will appear on every printed page. You can use any kind of CSS styling to style your watermark. Just make sure it has a high z-index value, so that nothing overlaps it.
Is there a way to manage the font size of the function definition hover on ST3?
Here's what I see:
I've tried adding font.size to the theme for this element which is popup_control html_popup according to docs but it doesn't appear to accept this.
Update: I found that pasting this CSS in my color theme plist addresses the list/links but not the title. I have tried to use a plugin like ScopeHunter to find the context of the 'definitions' title but it doesn't work for popups.
<key>popupCss</key>
<string><![CDATA[
html {
background-color: #404238;
color: #F8F8F2;
}
a {
color: #66D9EF;
}
.error, .deleted {
color: #F92672;
}
.success, .inserted {
color: #A6E22E;
}
.warning, .modified {
color: #FD971F;
}
]]></string>
The best thing to do is look at the HTML that is used in the popup, to help decide what CSS selectors to use in the color scheme's popupCss to change the appearance of the popup.
In this case, the code is in Packages/Default/symbol.py, which you can view using https://packagecontrol.io/packages/PackageResourceViewer:
<body id=show-definitions>
<h1>Definition%s:</h1>
<p>
...
</p>
</body>
So you can use the following CSS in your popupCSS to target it and change the color of the "Definitions" text, for example - to prove the selector is working (the official recommendation is to use the id from the body tag):
#show-definitions h1 {
color: #b3bc20;
}
however, specifying the font-size seems to have no effect, at least in build 3154, so I think there is a bug in ST.
developing this app in which there several images on a canvas and i am using using fabricjs.
i want to add text overlaid on an image and then be able to remove it as well.
is a way to directly write over the image or do i have to create another layer and write onto it.
there is text related like
var text = new fabric.Text('hello world', { left: 100, top: 100 });
canvas.add(text);
the problem with the above approach is that if the image moves the text will not, so is it possible that the text could be written directly above the image?
any ideas of how this could be done? i revived several discussions where it's not as clear, how it could be done.
any pointers would be most appreciated.
This could be achieved by creating an image and a text object, then adding both the objects to a group and finally adding that group to the canvas.
Here's an example, showing that in action ...
var canvas = new fabric.Canvas('canvas');
// load image
fabric.Image.fromURL('https://i.imgur.com/Q6aZlme.jpg', function (img) {
img.scaleToWidth(100);
img.scaleToHeight(100);
// create text
var text = new fabric.Text('hello world', {
left: 10,
top: 5,
fontSize: 15,
fontFamily: 'Verdana',
fill: 'white'
});
// add image and text to a group
var group = new fabric.Group([img, text], {
left: 50,
top: 50,
});
// add the group to canvas
canvas.add(group);
});
canvas{border:1px solid #ccc}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.11/fabric.min.js"></script>
<canvas id="canvas" width="200" height="200"></canvas>
I am not quite clear of what exactly is your requirement.
Regardless of it, i have created a JS Fiddle for you.
https://jsfiddle.net/xpntggdo/9/
textBox=new fabric.Textbox("Enter Text",{
fontSize: 16,
fontFamily: 'Arial',
textAlign: 'left',
width: 180, // for 20 characters
top:arrowTop,
left:arrowLeft
});
canvas.add(textBox);
canvas.renderAll();
This might be of a little help at least. Comment on this answer and I will try to help you more on it if that is possible for me.
I want to draw text on canvas., how to do it any sample example?
The canvas already contains some shape drawn, i want to show text on the top of that shape on canvas
How can i do it?
Also be aware that you need to actually have loaded a cufon font. There is no default font when using Fabric.js.
<script src="fabric.js"></script>
<script src="cufon.calibri.js"></script>
There are so many fonts available from http://www.cufonfonts.com/
This being the case the author is planning on removing the need for cufon. Discussed here: Fabric.js + Google Fonts
If you're wanting to render a block, then some text inside of that block. I would do something like this.
//Render the block
var block = canvas.add(new fabric.Rect({
left: 100,
top: 100,
fill: 'blue'
}));
//Render the text after the block (so that it is in front of the block)
var text = canvas.add(new fabric.Text('I love fabricjs', {
left: block.left, //Take the block's position
top: block.top,
fill: 'white'
}));
//Render the text and block on the canvas
//This is to get the width and height of the text element
canvas.renderAll();
//Set the block to be the same width and height as the text with a bit of padding
block.set({ width: text.width + 15, height: text.height + 10 });
//Update the canvas to see the text and block positioned together,
//with the text neatly fitting inside the block
canvas.renderAll();
Take a look at How to render text tutorial.
It's as simple as:
canvas.add(new fabric.Text('foo', {
fontFamily: 'Delicious_500',
left: 100,
top: 100
}));
Also worth noting that you might need to adjust Cufon's offsetLeft to help correctly position the text. Something like:
Cufon.fonts[your-fontname-in-lowercase-here].offsetLeft = 120;
The kitchen sink demo of fabric uses this:
http://kangax.github.com/fabric.js/lib/font_definitions.js