Last active
June 18, 2019 20:02
-
-
Save vbarbarosh/99f3ff0954bb7853d5881ccefa1752e3 to your computer and use it in GitHub Desktop.
math_line_intersection – Calculating the point of intersection of two lines https://codescreens.com
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- Calculating the point of intersection of two lines --> | |
<svg id="app" xmlns="http://www.w3.org/2000/svg"> | |
<line :x1="x1" :y1="y1" :x2="x2" :y2="y2" stroke="black" /> | |
<line :x1="x3" :y1="y3" :x2="x4" :y2="y4" stroke="black" /> | |
<circle :cx="c.x" :cy="c.y" r="3" fill="red" /> | |
</svg> | |
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script> | |
<script> | |
// https://stackoverflow.com/a/38977789/1478566 | |
function line_intersection(x1, y1, x2, y2, x3, y3, x4, y4) | |
{ | |
const denom = (y4 - y3)*(x2 - x1) - (x4 - x3)*(y2 - y1); | |
if (denom == 0) { | |
return null; | |
} | |
const ua = ((x4 - x3)*(y1 - y3) - (y4 - y3)*(x1 - x3))/denom; | |
const ub = ((x2 - x1)*(y1 - y3) - (y2 - y1)*(x1 - x3))/denom; | |
return { | |
x: x1 + ua*(x2 - x1), | |
y: y1 + ua*(y2 - y1), | |
seg1: ua >= 0 && ua <= 1, | |
seg2: ub >= 0 && ub <= 1 | |
}; | |
} | |
new Vue({ | |
el: '#app', | |
data: { | |
x1: 100, y1: 0, x2: 100, y2: 218, x3: 0, y3: 100, x4: 200, y4: 100 | |
}, | |
computed: { | |
c: function () { | |
const {x1, y1, x2, y2, x3, y3, x4, y4} = this; | |
return line_intersection(x1, y1, x2, y2, x3, y3, x4, y4); | |
} | |
} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment