Is there a method to ascertain the relative position of a point on a polygon?

Apologies in advance as I might have a hard time wording this question properly, so I'll start by explaining my objective.

I'm currently working with JavaScript and Raphael.

My goal is to save the position of a point in relation to the four corners of a polygon. The polygon's opposite corners can be visualized as having axes connecting them, always meeting at a right angle with one another. While the polygon can be rotated and resized on either axis, the axes will remain perpendicular. I aim for the point to maintain its position on the polygon regardless of any movement or stretching. Users click on a spot on the polygon to place the point.

What I want is to convert mouse click X/Y coordinates into some relative percentage or another measurement based on the polygon's internal axes, which are not always aligned with the browser's X/Y axes. How can this be accomplished?

The following image illustrates the concept I'm trying to convey.

The green dot represents the point for which I need to store the relative position within the polygon. I have X/Y coordinates for the red and blue corner dots.

javascriptraphael

Answer №1

Imagine a scenario where the lines connecting your red dots form the X axis, and the lines connecting the blue dots form the Y axis. In this setup, you can pinpoint any spot within the polygon by considering its distance along the X axis and Y axis. This simplifies the problem into two key questions:

  1. What are the "red blue" coordinates of the green point given the five points?
  2. Where can we locate the green point when provided with four points and the RB value?

One way to tackle this is by projecting the point along the red axis onto the blue axis, and vice versa.

Let's label the coordinates of the red points as (R1x, R1y) and so forth. Then, we compute as follows:

RdirX = R2x - R1x;
RdirY = R2y - R1y;
BdirX = B2x - B1x;
BdirY = B2y - B1y;

If the green coordinates are (Gx, Gy) and the "new" coordinates are denoted as (RBr, RBb), the equations are:

RBr*RdirX + RBb*BdirX = Gx
RBr*RdirY + RBb*BdirY = Gy

This addresses the conversion from RB coordinates back to Euclidean, and solving for the unknowns RBr and RBb gives us the reverse transformation. It is advisable to set the center of your polygon as the origin of your coordinate system for smoother processing.

I have detailed the equations alongside a visual representation to aid in better comprehension:


You should be equipped to proceed from here...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Excel files using the exceljs library

Using the exceljs module, I am able to read Excel files when they are in the same folder as my application. The code works perfectly in this scenario: var workbook = new Excel.Workbook(); workbook.xlsx.readFile('Data.xls') .then(function() ...

javascriptnode.jsnpmexceljs

Preventing the use of the <select> tag in JavaScript

As a beginner in JavaScript, I thought it would be a great idea to work on a simple Calculator project. I've already tackled the basics like addition and subtraction, but now I'm contemplating adding a squareroot function to it. The design incl ...

javascript

Strategies for organizing your week with a calendar

Hello, I am working on creating a weekly calendar using PHP and I want to add events to the calendar like in this example. However, I am unsure how to display the events in the calendar at the correct time of day. Here is the code snippet I am currently u ...

javascriptphpsql

Backend data not displaying on HTML page

I am currently working on an Angular 8 application where I have a service dedicated to fetching courses from an API endpoint. The service method that I'm using looks like this: loadCourseById(courseId: number) { return this.http.get<Cours ...

javascriptangulartypescript

Steps for showcasing the data entered in the input box

I am looking to enhance my skills in working with Angular and JavaScript. I would greatly appreciate any feedback on the issue I am facing here. My goal is for the text box input to display: "hello {name} , would you like to play a game? However, curr ...

javascripthtmlangularjs

Is there a streamlined approach to signal a successful callback to $q.all without the need to define a $q.defer() variable?

Within my application, I have a mixture of synchronous and asynchronous methods. Here is an example of code from one of the controllers: $q.all([ asyncMethod1(), syncMethod1() ]) .then(function (results) { Even though I don't actually need t ...

javascriptangularjsangular-promise

Optimal Method for Organizing Items in Express.js Using Mongodb

Can you share your insights on the best practices for sorting objects in expressjs + mongodb(mongoose) web applications? Imagine we have a Product model with four attributes: var ProductSchema = new mongoose.Schema({ name: String, // "Summer T-sh ...

javascriptnode.jsmongodbexpress

executing a hook within _app.tsx in Next.js

The issue I'm facing involves the rendering of a hook that helps determine if my components are within the screen's view to trigger animations. This hook is executed in _app.tsx, however, it doesn't run when switching to another page. Oddly ...

javascriptreactjsnext.jsreact-hooks

JavaScript - Separate Artist and Title

In the code snippet below, I am using a Parser script to extract metadata from a live streaming radio station: const Parser = require('../src'); const radioStation = new Parser('http://stream.com/live_32.aac'); radioStation.on(' ...

javascriptnode.jssplitseparator

Is there a way to prevent the annoying "Reload site? Changes you made may not be saved" popup from appearing during Python Selenium tests on Chrome?

While conducting automated selenium tests using Python on a Chrome browser, I have encountered an issue where a popup appears on the screen after reloading a page: https://i.stack.imgur.com/gRQKj.png Is there a way to customize the settings of the Chrome ...

javascriptpythonseleniumgoogle-chromeonbeforeunload

sketch a portion of a picture on a canvas

My challenge involves a canvas with dimensions of 400 by 400, and an image sized at 3392 by 232. I am looking to crop the first 400 pixels of this image and display them within the canvas. How can I achieve this task? $(document).ready(function () { v ...

javascripthtmlcanvas

The compare function in bcryptjs will result in a false output if the passwords include numerical

I have successfully used bcryptjs to hash my passwords during user registration. However, I am facing an issue with the bcrypt.compare function when attempting to log in. The function returns a false promise when passwords contain numbers or special charac ...

javascriptnode.jsexpressauthenticationbcrypt

Generating a list of items to buy using a JSON document

So here's the json file I'm working with: [ {"task":"buy bread","who":"Sarah","dueDate":"2023-10-18","done":false}, {"task":"clean car","who":"David","dueDate":"2023-08-30","done":true}, {"task":"write report","who":"Jenny","dueDate":"2023-09 ...

javascriptjqueryhtmlajaxjson

Modify the indentation format in CSS/JS

When the Tab key is pressed in an HTML page and the tabbed link gets highlighted, is it feasible to customize the style of that highlight? ...

javascripthtmlcss

Tips for transferring a JavaScript variable to PHP with AJAX

I am encountering an issue while trying to transfer a JavaScript variable, obtained from clicking a button, to PHP in order to execute a MySQL query. Here is my code: function ajaxCall(nodeID) { $.ajax({ type: "POST", url: "tree.php", data: {activeNode ...

javascriptphpajaxvariables

Tips for creating a script to calculate the population count of a 16-bit integer with either php or javascript

Looking to write a function that calculates the population count of a 16-bit integer in either php or javascript? Population count refers to the number of "turned on" bits, essentially counting the number of ones in the binary representation. For example, ...

phpjavascriptajax

Tips for adding content to a textarea after making manual changes to its existing content

One issue I encountered is with capturing the enter key on an input field and appending it to a textarea. While this works initially, any edits made directly on the textarea seem to disrupt the functionality. How can this be resolved? I have tested this i ...

javascriptjqueryhtmlforms

Enhancing Donut Chart with d3.js

After working for several hours, I'm having trouble getting my d3.js donut graph to update with new data. Here's my HTML: <body> <div id="pie"></div> <script src="pie.js"></script> </body> And he ...

javascriptd3.js

What are some ways I can showcase the outcomes of my multiple choice quiz?

I need help with my multiple choice quiz. I want to display the answers under each question and highlight the correct one in bold. Here is the current code: function check() { var question1 = document.quiz.question1.value; var question2 = document.q ...

javascripthtml

Anomaly in Date String Comparison within Angular Controller

Having a puzzling issue when attempting to compare two date strings within my Angular Controller. It seems that the comparison is yielding unexpected results. To explain, I first convert today's date to a string ("2/5/2016") and then proceed to use it ...

javascriptangularjs