Help needed to copy part of a canvas

[ABG]

I am also toying the idea that it might be possible to draw an entire row of the canvas as a single polygon shaped like a linear string of square beads, irregularly spaced.

But I have not yet figured out how you map your two matrixes into rows and columns.

[fbeleznay]

I am doing it square by square. It takes a few seconds, so it is not that bad, but it would be better to have an almost instantaneous change. I guess, I will have to learn to create a dedicated extension.

I was also looking at the TaifunImage extension, but it is also problematic for me. There, too, the size of an image depends on where it loads it to, not how it is stored (or at least I could not yet figure out a way of forcing the size). That extension has a crop tool, which I could use to crop the image of the sprite before I place it on the canvas.

I also looked into the canvasLayer extension (it has a tool to copy part of a canvas to another layer), but I could not find a documentation for it , so it will take some time to figure out what part I need (it has a lot of tools).

[fbeleznay]

To be honest, I am a bit surprised that there is no bitmap handling for images. That is how images are stored, it is a 2D array, it would be easy to manipulate that array to do the shift.

[ABG]

I did an experiment generating SVG graphics on a Webview from text a while back, with animation, no extensions.

I can search after breakfast.

[fbeleznay]

I have not thought about the webview. This is an interesting idea. SVG is indeed an option (if you could find your experiment, I would be interested to see it) or I can also try to use javascript to generate the image.

[ABG]

Found it.

Zoom app inventor

The AI2 Canvas does not have a zoom facility. To zoom, you would have to keep track of what was drawn so you can redraw it. Alternatively, you could try SVG graphics in a Web Viewer. (The stock Ai2 emulator’s Web Viewer is too old to handle SVG, unfortunately.) Here is an SVG sample to try on a more modern emulator or device … [circle] [pad] [viewbox] webviewer_SVG.aia (3.7 KB) [when button1 click] (The handy direct url feed technique I got from @TimAI2)

[fbeleznay]

Unfortunately none of my android devices could show the svg, but I get the idea. I will be busy teaching during the week, but I will try something in the evenings. Thanks for your help.
As for my previous post about the positioning of the sprite on the screen, is it the intended behaviour to try to fit it in the screen, or is it a bug? If it is not the intended behaviour, how do I report it?

[TIMAI2]

In order to be able to answer some of your questions. we could probably do with a simple example aia project: two canvases, one with a static background image, and your image capture method, along with then displaying the captured image in the second canvas?

[fbeleznay]

I do have a simple example in post 20 of this thread that shows my problem with the positioning and sizing of sprites. I do not have two canvases there, but I do have a drawing in a canvas, saving that canvas, loading it back as a sprite and putting it on the canvas. I also explain my observations and problems in that post.

[ABG]

@fbeleznay

As for my previous post about the positioning of the sprite on the screen, is it the intended behaviour to try to fit it in the screen, or is it a bug? If it is not the intended behaviour, how do I report it?

I tried some of the code in your tests, and added a bit to try to make it work.

movePatternTrial_4 (1).aia (5.1 KB)

I added code to force the sprite size in proportion to the Canvas size, using pixel math.
I had to add colors to make the sprite more visible in contrast to the Canvas.

I am seeing bugs galore in AI2:

• Canvas hops out of its Arrangement after a Canvas Save File
• Sprite can't be dragged past edges, in spite of turning on the Canvas flag allowing edge escape.

I need a break from this idea.

@fbeleznay

is it the intended behaviour to try to fit it in the screen, or is it a bug? If it is not the intended behaviour, how do I report it?

Feel free.
There's a category for that.

[TIMAI2]

@fbeleznay

I do have a simple example in post 20

Sorry, missed that, will take a look.

[TIMAI2]

The canvas image being saved is 535x535 pixels (not 200x200)

The canvas can receive a larger image and fit it to the canvas size, but an imageSprite with height and width set to automatic will return the 535x535 image.

There is also a bug with the canvas that moves it around, which also causes some confusion.

If you set the imageSprite height and width to 200x200, then the imageSprite will be the same size as the canvas, and will display as such.

What you cannot do is then move the imageSprite by 100x/100y, because it fills the canvas, and cannot go outside its bounds.

What you can do (not withstanding the implications of the aforementioned canvas bug), is have a fixed width and height arrangement (e.g. 200x200), centred both ways, and place a canvas of larger dimensions inside it (e.g. 800x800), then you can position an imageSprite of 200x200 outside of the "view" or anywhere in the view (the arrangement)

I have an example somewhere...

Here it is

scrollzoomimageincanvasscrollapp2.aia (141.4 KB)

There are also several extensions available that will return the size of an image, allow you to resize it (bigger or smaller), and to crop an image.

Here is mine

ImageConvertor

[ABG]

Here's a start on the SVG tutorial examples at

W3Schools.com

webviewer_SVG.aia (3.0 KB)

[fbeleznay]

@TIMAI2

The canvas image being saved is 535x535 pixels (not 200x200)

On my system the image is 400x400pixel, not 535x535. Apparently, this is system dependent and I don't quite understand how it is calculated. Why is it not the size of the canvas (which is fixed to 200x200)?

Resizing all the time is not really an option for me, because it will probably blur the edges (I will try though). To start with, a 100x100 filled black square on the top left corner of a 200x200 white canvas will not be saved in a 535x535 image as a black square on a white background with side length that is exactly half the length of the image, since half of 535 is not a whole number. Some interpolation will need to be used (which would be unnecessary if the size of the canvas would be kept).

Thanks for all your help, I will explore the different options. It will be slow though, because I will only have time to do this in the evenings.

[Kevinkun]

Sorry I read the whole thread, but don't understand what you want to achieve.
Can you please elaborate again?

[Kevinkun]

@TIMAI2

What you cannot do is then move the imageSprite by 100x/100y, because it fills the canvas, and cannot go outside its bounds.

I just found the imageSprite created by CompCreator can be moved outside the canvas.
movePatternTrial_4_CompCreator.aia (38.1 KB)

[fbeleznay]

@Kevinkun

Sorry I read the whole thread, but don't understand what you want to achieve.
Can you please elaborate again?

In short: I would like to move the content of the canvas up or down by a fixed amount of pixels when a button is pressed.

A more detailed description:

• I am drawing a pattern on the canvas, which includes rows of squares. The squares have fixed height. When the user presses a button, these rows needs to be shifted up or down by one row (and a new row needs to appear on the screen). The pattern is given by two lists. One list contains lists of 0,1 sequences, which describe the patterns in each row. The other list shows the order in which the rows of this pattern row list need to be displayed. I also include periodicity in the display, since the length of these lists are not the same as the length and width of the canvas (so I loop around).
• At the moment I do a double loop (for the x and y direction) and call drawPoint several times to draw the squares individually. This is quite slow.
• I was hoping that with a shift of the canvas image I can get rid of the double loop and draw only the new line.

[Kevinkun]

1. you need to improve your drawPattern function, which use drawPoint pixel by pixel, that's too slow, you need to change to use DrawLine to draw small square.
2. You can move imageSprite out of canvas by using extension in post #40.

@fbeleznay

move the content of the canvas up or down by a fixed amount of pixels

what about the part you move out of the canvas? just discard them?

[fbeleznay]

@Kevinkun

1. you need to improve your drawPattern function, which use drawPoint pixel by pixel, that's too slow, you need to change to use DrawLine to draw small square.

I change the width of the line and this way DrawPoint does draw a small square, not just a pixel.

@Kevinkun

2. You can move imageSprite out of canvas by using extension in post #40.

I will look at that extension.

@Kevinkun

what about the part you move our of the canvas? just discard them?

Yes, for the moment I discard the part that moves out of the screen.

[Kevinkun]

Not tested:

save canvas then set it as background image, will make the image more and more blur.
Maybe try to set background image with Base64, using this extension.