Pen and pages

Questions
1

hello guys, hope you all right.
i am struggling with this situation

pen can't draw any thing !!

have many pages, the user will be able to draw in specific page,
and the pages effected by the motion of pen which it's drawing doesn't even exist.

some pieces of my code:

 // page -6-
            var page6 = new Page(stageW, stageH);
            
            new Sprite({
                image: "cat.png",
                cols: 2,
                rows: 2,
                spacingY: 16,
            })
 .sca(1.2).loc(100, 210, page6)
            .run({
                    loop: true,
                    time: .6,
                    waitedCall: .4,
                    rewind: true,
                    rewindWait: .3
                })
new Label({
                text: "أكتب العدد المناسب",
                align: RIGHT,
                size: 80,
                backgroundBorderColor: red,
                color: blue,
                rollColor: red,
                bold: true,
                italic: true
            }).loc(700, 60, page6);

            

            const pen = new Pen({
                damp: 0.5,
                color: "black",
            }).center(page6);

            const motionController = new MotionController({
                target:pen.center(page6),
                type:"pressmove",
                speed:60,
                damp:.5,
            });


            ///////// list of pages
            var pages = new Pages([
                { page: page1, swipe: [page5, page2, page5, page2] },
                { page: page2, swipe: [page1, page3, page1, page3] },
                { page: page3, swipe: [page2, page4, page2, page4] },
                { page: page4, swipe: [page3, page5, page3, page5] },
                { page: page5, swipe: [page4, page6, page4, page6] },
                { page: page6, swipe: [page5, page1, page5, page1] },
            ], "bubbleZIM", .5, [
                [page2, page3, "pixelZIM"],
                [page3, page2, "pixelZIM"],
                [page3, page4, "fan"],
                [page4, page3, "fan"],
                [page4, page5, "explodeDark"],
                [page5, page4, "explodeZIM"],
                [page5, page6, "fan"],
                [page6, page5, "lineDark"],
           
            ]).addTo();
2

Yes... this could be tricky.

I would suggest one Pen and then add a different Container for the drawing to each page. Then when you go to another page, change the paper property of the Pen to the container for the page.

Also, depending on what is on your pages, the MotionController may need to have things added to the mousedownIncludes parameter so the Pen draws. By default, the Pen only draws on empty areas. So if you want to draw on a Pic() then you need to add that Pic() to the mousedownIncludes array.

I am just winding down for the night... but will see if I can create an example tomorrow.

3

i wish that,
i find it some complecated,
i have tried to fixed but doesn't work

4

I have created containers on the page code and on the main code and I can't get it to write either. I did have "swipe" disabled on pages, could that be the issue?

5

Ok, I figured it out. Use the container property on the motioncontroller and add the container that holds the pen. It worked for me.

1 Like
6

This is how it should work. But there is a bug in the paper code. Have not used it in a while and something is broken.

  1. it does not draw until mouseup
  2. assigning a new paper to it is still drawing in the old one

I have to go give an exam... will take a look later tonight.

7

It's drawing fine for me when with pressmove and i added the paper container to the motioncontroller.

8

Yes - but when the page changes, are you using a second MotionController... have you got it working with more than one page?

9

Okay - it seems it was just trying to use the Pen inside a Page object - or maybe any Container that is not empty. So adding an empty Container to each page works and solves both the problems - the code in the Editor has been updated.

The only thing now is that when we try and drag the drawn lines, it drags them and then also draws. So have turned move:false - but am just seeing if we can debug that issue.

10

Okay - fixed the drawing while dragging - just working on a few more things and then will patch and let you know.

11

The Zapp file has been updated at ZAPP: Adding Pen to multiple Pages | ZIM JavaScript Canvas Framework

Also, we have patched ZIM 016 so that pens inside a custom paper will drag without drawing as we drag ;-). We had left out a variable in the MotionController.

So, please let us know how it goes. I would use the technique in the Zapp file so study it well. Cheers.

12

Is this working in a new Book also?

13

Maybe... try it. There is an example of a Pen in a book here https://zimjs.com/story