1) You can use gr.WriteText with a negative x value to start drawing it off the left hand side of the panel like this...
// ==PREPROCESSOR==
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
var x = 5;
function on_paint(gr) {
x = Math.min(x, 5);
gr.FillRectangle(0, 0, window.Width, window.Height, RGB(255, 255, 255));
gr.WriteText(text, '', RGB(0, 0, 0), x, 5, window.Width + -x, 20, 0, 2, 1, 1);
}
function on_mouse_wheel(step) {
x += step * 24;
window.Repaint();
}
If you wanted it constrained within the bounds of a rectangle, you'd have to create a temporary IJSImage object and use WriteText on that and then use gr.DrawImage like this...
// ==PREPROCESSOR==
// @import "%fb2k_component_path%helpers.txt"
// ==/PREPROCESSOR==
var img = null;
var text = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
var x = 5;
create_image();
function create_image() {
x = Math.min(x, 5);
img = utils.CreateImage(300, 20);
var g = img.GetGraphics();
g.WriteText(text, '', RGB(0, 0, 0), x, 0, 300 + -x, 20, 0, 2, 1, 1);
img.ReleaseGraphics();
}
function on_paint(gr) {
gr.FillRectangle(0, 0, window.Width, window.Height, RGB(255, 255, 255));
gr.DrawImage(img, 50, 50, img.Width, img.Height, 0, 0, img.Width, img.Height);
gr.DrawRectangle(50, 50, img.Width, img.Height, 1, RGB(255, 0, 0));
}
function on_mouse_wheel(step) {
x += step * 24;
create_image();
window.Repaint();
}
2) The src args in DrawImage is the portion of the image you'd like to display. For the whole image, it would be
0, 0, img.Width, img.Height
If it was square and you imagined it being cut in half both ways and you wanted the bottom right, you'd use
img.Width / 2, img.Height / 2, img.Width / 2, img.Height / 2