hoping somebody could assist me (JS Newbie!)
I am creating a project for users to input their name on an HTML webpage and it adds it to a PDF via .JS file. I have everything working all great except I cannot get the text to be centrally aligned - I have inputted X and Y coordinates but the text starts at this point - so looks off, especially with longer names.
Here is the code that writes the name from the input on the JS file the HTML calls upon:
firstPage.drawText(name, {
x: 70,
y: 245,
size: 35,
font: ArialFont ,
color: rgb(0, 0, 0),
});
What should I be putting into the X and Y (and is there any extra code?)
Thank you for any help, it will be VERY much appreciated!
Garry
Tried solutions found via google
You'll need to dial in the charWidth value, but this could be a good place to start
var charWidth = 4; // as example
var inputName = 'Mr. Testing Example';
var initialPosition = 70;
var offset = inputName.length / 2 * charWidth;
var startingPosition = initialPosition - offset;
console.log(startingPosition);
firstPage.drawText(name, { x: startingPosition, y: 245, size: 35, font: ArialFont , color: rgb(0, 0, 0), });
Related
I am trying to build a plugin for XD to automate the creation of design elements. I have written a function to build the button (first picture below) using a text element and a rectangle. The only problem with this is that shape of the rectangle is not based on the width of the text, so when the text is longer you end up with the text overlapping the rectangle (see second picture below).
I have been trying to figure out how to get the width value of the text element so that I can size the rectangle appropriately. Can anyone help me with this?
I have figured out that by adding the line console.log (selection.items); I can output a full list of properties to the log, but how do I access the width property?
Here is the log output showing the rectangle and text elements...
[ Text ('Submit Button') {
width: 113, height: 20
global X,Y: -3, -74
parent: Artboard ('iPad – 1')
fill: ff000000
},
Rectangle ('Rectangle 6') {
width: 100, height: 50
global X,Y: -3, -58
parent: Artboard ('iPad – 1')
stroke: ff2d3494
} ]
and here is my full code...
const {Rectangle, Color, Text, Selection} = require("scenegraph");
let commands = require("commands");
function createButton(selection) {
// Create the outline of the button
const newButtonOutline = new Rectangle();
newButtonOutline.width = 100;
newButtonOutline.height = 50;
newButtonOutline.stroke = new Color("#2D3494");
newButtonOutline.strokeWidth = 2;
newButtonOutline.cornerRadii = {
topLeft: 10,
topRight: 10,
bottomRight: 10,
bottomLeft: 10
};
// Create the text for the button
const newButtonLabel = new Text();
newButtonLabel.text = "Submit Button";
newButtonLabel.fontSize = 18;
newButtonLabel.fill = new Color("#000000");
// Add the text and outline to the artboard
selection.insertionParent.addChild(newButtonOutline);
newButtonOutline.moveInParentCoordinates(100, 100);
selection.insertionParent.addChild(newButtonLabel);
newButtonLabel.moveInParentCoordinates(100, 100);
selection.items = [newButtonLabel, newButtonOutline];
console.log (selection.items);
//align the button elements and group together
commands.alignHorizontalCenter();
commands.alignVerticalCenter();
commands.group();
}
I hope someone can help!
So it turns out to get the width of a text node you need to get it from the localBounds, something like...
textNode.localBounds.width
or to get the width of a graphic node it is just...
graphicNode.width
I'm using the jspdf library and I'm facing some problems in the content position, suppose I have this pdf:
var doc = new jsPDF();
doc.setFontSize(12);
doc.text("some text", 15, 14); //<- vertical height is 14
as you can see I placed the text to x = 15 and y = 14, how can I calculate the used height (y) for add the next content? eg:
doc.addImage(someImage, 'JPEG', 15, 10, 60, 10);
as you can see I have an image that is:
x: 15
y: 10
width: 60
height: 10
but how can I know the used vertical height to add the new content? Because in the example above the image will overlay the text (y = 10).
I'm looking for a function that calculate the used height in the document, so I can know where to place the new content in the (vertical y) height.
Maybe there is another and simple solution to do this?
Thanks in advance.
You can use a work around for this as follows.
Crete a variable var y=14 and use this variable in your text part.
doc.text("some text", 15, y);
You can reuse the same variable in order to place image after it. or may be if you need space, you can reuse this variable as
var img_y=y+10;
doc.addImage(someImage, 'JPEG', 15, img_y, 60, 10);
I am using jspdf to convert my html page to PDF. So far I have figured out styles in the HTML don't apply to the PDF document. So I'm using doc.text and doc.rect.
I need the text on top of the rectangle but it seems to be that the rectangle is always on the top and it covers the text. How can I resolve this?
This is what I have tried:
var doc = new jsPDF();
doc.setFontSize(17);
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F')
Draw your rectangle before you draw your text
var doc = new jsPDF();
doc.setFontSize(17);
doc.setFillColor(255,255,200);
doc.rect(100, 20, 10, 10, 'F');
doc.setTextColor(255, 0, 0);
doc.text(100,25, 'USD.00');
In jsPDF must be write code in sequence, then first draw the retangle and last write your text.
var doc = new jsPDF();
doc.setDrawColor(0);
doc.setFillColor(255, 0, 0);
doc.rect(40, 50, 30, 12, 'FD'); //Fill and Border
doc.setFontSize(8);
doc.setFontType('normal');
doc.text('hello', 42, 51);
You can use getTextWidth method to set proper width for a rectangle, but then you have to set font size/type before getting the width.
http://raw.githack.com/MrRio/jsPDF/master/docs/module-annotations.html#~getTextWidth
I am looking for an example application that takes user input and inserts it into a inside canvas with fabric.js. Is this possible? I haven't been able to find a lists in fabric.js example.
canvas.fillText does not accept HTML markup.
A Canvas is a bitmap, it has nothing to do with HTML markup.
You can control font style as described here.
There are libraries that convert XML markup into canvas.fillText calls, maybe you could adapt one.
I realized a better way to solve this issue was to draw a circle at the same height as the text, at radius 2, to emulate a bullet point. for anybody interested its easy as:
var EDU1 = new fabric.IText("SOME TEXT GOES HERE", {fontSize: 20, fontStyle:
'italic',fontFamily: 'Hoefler Text', left: 149, top: 390});
var bullet = new fabric.Circle({
radius: 2, fill: 'black', left: 135, top: 400
});
then group them together and you have a bullet point.
function ListStyle (textObject,type,canvas) {
var styles=['\u25CF','\u25C8','\u25D8','\u25BA','\u25CB','\u25A0','-'];
var allStyles={'bullet':'\u25CF','diamond':'\u25C8','invertedBullet':'\u25D8','triangularBullet':'\u25BA','disced':'\u25CB','squared':'\u25A0','dashed':'-','none':''};
var text = textObject.text;
var textArray = text.split('\n')
var tempStr = [];
textArray.forEach((text, i) => {
if(styles.includes(text.substr(0,1))){
tempStr.push(text.replace(text.substr(0,1),allStyles[type]));
}else{
tempStr.push(allStyles[type]+''+text);
}
})
textObject['text'] = tempStr.join('\n');
canvas.renderAll();
}
ListStyle (canvas.getObjects()[0],'diamond',canvas);
I've been messing around with Raphael.js recently and I've run into a problem regarding the position of each Raphael object.
I want to create an arbitrary amount of 'canvases' but have them arranged within a div, already positioned on the page. I've been trying to figure out a way to get them to behave something like a block element, but haven't come up with an answer. Each new raphael object is placed outside of any div.
Here's the html:
...
#content{height:100%; width:980px; margin:0 auto;}
</style>
</head>
<body>
<div id="content"></div>
...
and the javascript:
var previews = [];
var prevSize = 25;
var spacing = 10;
//get container
var container = document.getElementById('content');
//get container width
var containerWidth = parseInt(getComputedStyle(container,"").getPropertyValue('width'));
var prevsPerRow =containerWidth/(prevSize+spacing);
var rowsPerPage = 20;
for(var y=0; y<rowsPerPage-1; y++){
for(var x=0; x<prevsPerRow; x++){
var preview = Raphael((x*prevSize)+(x*spacing), (y*prevSize)+(y*spacing),prevSize, prevSize);
previews.push(preview);
}
}
for(var x=0; x<previews.length-1; x++){
var temp = previews[x];
var rectangle =temp.rect(0,0,prevSize,prevSize);
rectangle.attr('fill','black');
}
One solution I was considering was simply adding the offset of the desired div to the x and y coords of the object, but this doesn't seem like the best solution.
Thanks for the help!
edit: Here is a jsfiddle to help elucidate exactly what I'm getting at.
http://jsfiddle.net/xpNBr/
Well, this is two years too late but I'm not seeing an answer here. So for posterity and future seekers: I'd use the element or element Id factory methods supplied by raphael as described here.
From that page:
// Each of the following examples create a canvas
// that is 320px wide by 200px high.
// Canvas is created at the viewport’s 10,50 coordinate.
var paper = Raphael(10, 50, 320, 200);
// Canvas is created at the top left corner of the #notepad element
// (or its top right corner in dir="rtl" elements)
var paper = Raphael(document.getElementById("notepad"), 320, 200);
// Same as above
var paper = Raphael("notepad", 320, 200);
// Image dump
var set = Raphael(["notepad", 320, 200, {
type: "rect",
x: 10,
y: 10,
width: 25,
height: 25,
stroke: "#f00"
}, {
type: "text",
x: 30,
y: 40,
text: "Dump"
}]);
You could use a different container for every newly created canvas.
Here is a working example, using the addCanvas function to create every new element:
http://jsfiddle.net/creaweb/KtNPS/5/
Note that the spacing between canvas blocks is defined in CSS, as well as their size.