How to scroll the view to the location of a specific createjs element inside a canvas

115
March 19, 2022, at 06:00 AM

We are implementing documents electronic signature using createJS library. We collect the user signature and save it then we load the document in a canvas and mark the signature place in each page. Each document may has one or more pages or may not have any at all. Most of the documents are coming from other webservices and they send us an array of signature events along with base64 of the page. Each signature event has the location x and y of the signature in the page in pixels and we load the signature in the page using createjs.Bitmap and it load exactly where it suppose to be with no issues. The issue is we are trying to implement a Next Signature feature where the screen should scroll to the next signature location (see the mockup) Right now each document card has accordion class and will close the card after all signatures in the document are signed. Currently I multiply the number of open pages * 1024 + (signatureEvent[y]) then use jQuery scroll to the location. But after 4-5 Documents the locations are not accurate and the page scroll to the wrong signature location.

So I'm looking into a way to associate each signature with a div element with an id I can scroll to or any other method maybe used with createjs elements. Each signature is placed inside createjs container then placed into the canvas but I dont see the container's id when I inspect the html.

var signatureContainer = new createjs.Container();
signatureContainer.id = item.SignatureEventId;
signatureContainer.x = item.Left;
signatureContainer.y = item.Top;
signatureContainer.PageNum = item.PageId;

I also tried to use createjs DOMElement but failed to associate it with the signature container.

Any direction will be appreciated.

page mockup

Current html screenshot

Rent Charter Buses Company
READ ALSO
How to make textfield mandatory based on value of pathfield in aem

How to make textfield mandatory based on value of pathfield in aem

My question is in aem dialog if we have two fields one is pathfield and another one is textfiled, Now I want to make textfield mandatory if some value is entered in pathfield and also if no value is entered in pathfield then I dont want to make textfield...

114
How can I use json response from php in jquery?

How can I use json response from php in jquery?

I'm trying to do a websiteI need to get all the reviews in the database

112
How can i do onclick event with html,css,js

How can i do onclick event with html,css,js

I want the css codes of the blog1popup class to change when the image is clickedI know how to do this with hover, but i don't know how to make this action happen by clicking

111
Best practices writing JavaScript that uses AJAX call to decide if default action should be prevented

Best practices writing JavaScript that uses AJAX call to decide if default action should be prevented

I'm using JavaScript and jQuery to write a handler for my form being submittedBased on certain conditions, the handler may allow or prevent the form from submitting

91