I am dealing with a situation where I have a chart with a rectangle and some points. One point, O, is dependent on the edges of the rectangle.
When I drag a corner point, B, the rectangle deforms.
Does anyone have suggestions on how I can calculate the new coordinates of point O after the deformation? I am programming in JavaScript so an algorithm would be greatly appreciated. Thank you in advance for your help and apologies for any errors in my English!
To start, determine the relative positions of your point within the rectangle:
posXRel = (O.x - A.x) / (B.x - A.x);
posYRel = (O.y - A.y) / (B.y - A.y);
Locate the position of these relative coordinates on the sides of your quadrilateral A’B’C’D’
On A’B’: posAB.x = A’.x + posXRel * (B’.x - A’.x); posAB.y = A’.y + posXRel * (B’.y - A’.y);
On B’C’: posBC.x = B’.x + posYRel * (C’.x - B’.x); posBC.y = B’.y + posYRel * (C’.y - B’.y);
On C’D’: posCD.x = C’.x + posXRel * (D’.x - C’.x); posCD.y = C’.y + posXRel * (D’.y - C’.y);
On D’A: posDA.x = D’.x + posYRel * (A’.x - D’.x); posDA.y = D’.y + posYRel * (A’.y - D’.y);
Next step is to find the intersection between the line going from posAB to posCD and the line going from posBC to posDA:
To do this, we need to set the equation: Y = aX + b for both lines and calculate a and b.
For the line from posAB to posCD:
a1 = (posAB.y - posCD.y) / (posAB.x - posCD.x);
b1 = posAB.y - a1 * posAB.x;
For the line from posBC to posDA:
a2 = (posBC.y - posDA.y) / (posBC.x - posDA.x);
b2 = posBC.y - a2 * posBC.x;
Finally, we are searching for the solution of the equation:
a1 * O’.x + b1 = a2 * O’.x + b2;
Therefore, the new coordinates will be:
O’.x = (b2 - b1) / (a1 - a2); O’.y = a1 * O’.x + b1;
Could you confirm if this method is successful?
To determine O's new position, consider the following steps:
Prior to moving point B, calculate the proportion of O's location on each side. For instance:
oPositionX = O.x / (B.x - A.x); oPositionY = O.y / (B.y - C.y);
After moving B, update O's position with the following formula:
O.x = oPositionX * (B.x - A.x) + A.x; O.y = oPositionY * (B.y - C.y) + C.y;
While uncertain about the exact algorithm, I believe this general concept should apply.
Looking for guidance on creating a new playlist using the Web API? Check out the notes here: When making a POST request to https://api.spotify.com/v1/users/{user_id}/playlists, make sure you include the access token and data with a content type of 'a ...
JavaScript Issue return response()->json([ 'category' => $category, 'editRoute' => $artistCategoriesEditRoute ]); AJAX Response category Object { id: 1, title: "tt", parent_id: 0, … } id ...
Seeking clarification on a key topic, Based on my understanding, two distinct paths exist: relative and absolute. Stricly relative: <img src="kitten.png"/> Fully absolute: <img src="http://www.foo.com/images/kitten.png"> What sets apart R ...
Let me provide some context first: Previously, my focus was on developing lightweight, single-page Angular applications. However, in the past few days, I began working on a new project that combines Tapestry and Backbone. It has proven to be quite overwhe ...
Currently, I am in the process of developing a filtering mechanism to sift through a dataset obtained from an API. The array that requires filtering contains objects with various parameters, but my aim is to filter based only on specific parameters. For ...
I am looking for a way to display and hide a section on my page when a specific tab is active, and close it when the tab is inactive. I have tried using the forceOpenSettings and forceCloseSettings methods for opening and closing the div. Is there an event ...
I have been attempting to update documents in my mongoDB database using JavaScript. I understand that forms typically only support post/get methods, which has limitations. Therefore, I am looking for an alternative method to successfully update the documen ...
I am facing a challenge where I have a function that accepts multiple arrays as arguments, but the data available to me is already within an array called mainArr. This mainArr consists of several array items that need to be passed as arguments to the funct ...
I have this specific section of code from my GAE application that utilizes webapp2 framework to receive data from a form through the post method. class RenderMarksheet(webapp2.RequestHandler): def post(self): regno = self.request.get('content ...
Despite my efforts to find a similar question, I couldn't come across one. My apologies if I overlooked it. Currently, I am working on a React Material-UI project to develop a basic web application. Within this application, there is an XGrid that disp ...
Dealing with the nature of asynchronous XMLHTTPRequest in JavaScript can be tricky. I faced a challenge where I needed to return the responseText value but found it impossible due to this nature. To overcome this, I came up with a workaround by calling a f ...
DISCLAIMER: I raised this issue on the Next.js GitHub repository, but it was closed without recognition. The solution provided did not resolve my problem, leading me to seek help here. The Issue at Hand I have created a demo app (accessible here) on Code ...
I have a situation where I am using jQuery to toggle the visibility of a div by clicking on show/hide buttons. However, I am facing an issue where the code does not work as intended. Every time I click the buttons, the div reverts back to its original stat ...
I need the div to appear wherever the cursor is holding down the right mouse button. In my scenario, I am using the following code: <div class="d-none" id="item"></div> #item{ position: absolute; top: 0; left: 0; w ...
I am currently learning React and attempting to create a slide-down animation for my div element using react-spring. However, I am facing an issue where the slide-down effect is not functioning as expected even though I followed a tutorial for implementati ...
Looking for some assistance in verifying that the date in a request is exactly Today. I've tried various methods from the documentation, but haven't achieved the desired outcome yet. Calling out to any helpful souls who can guide a junior QA thro ...
"scripts": { "start": "node server.js", "build": "webpack" }, Is there a way to execute both npm run build and npm start with a single command? "scripts": { "start": " ...
Currently, I am in the process of developing a website utilizing nunjucks and express. This website serves as a blog platform with content sourced from prismic. My goal is to load a script file for an active campaign form whenever a user navigates from a b ...
I am currently developing a Blog application using NodeJs, where I have integrated express Validator to validate data. I am facing an issue with displaying flash messages in the UI after submitting forms. The error message that I receive is [object Object] ...
Hello, I have been trying to establish communication with the server through my application. To achieve this, I made a call to the webservice using AJAX. Now, I am looking to incorporate a time interval in AJAX. Can anyone kindly provide guidance on how ...