multiline text, or copies of the same line of text
heaversm opened this issue · 2 comments
Hi - I want to achieve this effect:
where I have multiple copies of the same line of text (or copies of the canvas, etc). I can get blotter to work on a single line of text, but I've tried numerous methods of creating a copy and non of them work.
For example:
<div id="distortion-text1" class="progress__content"></div>
<div id="distortion-text2" class="progress__content"></div>
<div id="distortion-text3" class="progress__content"></div>
and
var elem1 = document.getElementById('distortion-text1')
var elem2 = document.getElementById('distortion-text2')
var elem3 = document.getElementById('distortion-text3')
var scope1 = blotter.forText(text);
var scope2 = blotter.forText(text);
var scope3 = blotter.forText(text);
scope1.appendTo(elem1);
scope2.appendTo(elem2);
scope3.appendTo(elem3);
I've also just tried cloning the canvas and that doesn't work. Blotter seems to just append one single canvas to the last dom node (distortion-text3), no matter what I do.
I got this to work - but I feel like there should be a better method (or one you can control independently):
var textOptions = {
family : "'gtf_adieu_trialbold','EB Garamond', serif",
size : 50,
fill : "#220032",
paddingLeft : 40,
paddingRight : 40
};
var text = new Blotter.Text("WORK IN PROGRESS", textOptions);
var text2 = new Blotter.Text("WORK IN PROGRESS",textOptions);
var text3 = new Blotter.Text("WORK IN PROGRESS",textOptions);
var blotter = new Blotter(material, {
texts : [text,text2,text3]
});
var elem = document.getElementById('distortion-text')
var scope = blotter.forText(text);
var scope2 = blotter.forText(text2);
var scope3 = blotter.forText(text3);
scope.appendTo(elem);
scope2.appendTo(elem);
scope3.appendTo(elem);
Any idea on how to optimize?
Thanks!
The working example is the correct way to achieve this. The RenderScope
objects Blotter instances return from forText
just use basic JavaScript append
and appendTo
functions on the supplied DOM node, and that's just how they work.
If code repetition is annoying, you may also try building your texts, fetching their scopes, and appending them to their DOM elements in some kind of loop, but YMMV. I dont think that's really what youre after here though.
Best.