﻿<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Keith Hair &#187; Constrain</title>
	<atom:link href="http://keith-hair.net/blog/tag/constrain/feed/" rel="self" type="application/rss+xml" />
	<link>http://keith-hair.net/blog</link>
	<description>Scripting is fun like any other hobby</description>
	<lastBuildDate>Mon, 17 May 2010 16:02:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Constrain a Point to a Line</title>
		<link>http://keith-hair.net/blog/2008/12/27/constrain-a-point-to-a-line/</link>
		<comments>http://keith-hair.net/blog/2008/12/27/constrain-a-point-to-a-line/#comments</comments>
		<pubDate>Sat, 27 Dec 2008 17:42:20 +0000</pubDate>
		<dc:creator>Keith H</dc:creator>
				<category><![CDATA[ActionScript 3]]></category>
		<category><![CDATA[Constrain]]></category>
		<category><![CDATA[Line]]></category>
		<category><![CDATA[Point]]></category>

		<guid isPermaLink="false">http://keith-hair.net/blog/?p=27</guid>
		<description><![CDATA["Drag and Drop" behavior is easy to do in ActionScript, but sometimes it would be cooler if you could limit or constrain the dragging movement of an object to a line. This opens the door for implementing more creative interaction design... 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ctoline_285991824"
			class="flashmovie"
			width="550"
			height="400">
	<param name="movie" value="/blog/examples/constrain/ctoline.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/blog/examples/constrain/ctoline.swf"
			name="fm_ctoline_285991824"
			width="550"
			height="400">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object> &#160; /*--------------------------------------------------------------------------- Returns the closest Point on Line &#34;AB&#34; [...]]]></description>
			<content:encoded><![CDATA[<p>"Drag and Drop" behavior is easy to do in ActionScript, but sometimes it would be cooler if you could limit or constrain the dragging movement of an object to a line. This opens the door for implementing<br />
more creative interaction design...</p>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
			id="fm_ctoline_920905308"
			class="flashmovie"
			width="550"
			height="400">
	<param name="movie" value="/blog/examples/constrain/ctoline.swf" />
	<!--[if !IE]>-->
	<object	type="application/x-shockwave-flash"
			data="/blog/examples/constrain/ctoline.swf"
			name="fm_ctoline_920905308"
			width="550"
			height="400">
	<!--<![endif]-->
		
	<!--[if !IE]>-->
	</object>
	<!--<![endif]-->
</object>
<p><span id="more-27"></span></p>
<pre class="actionscript">&nbsp;
<span style="color: #808080; font-style: italic;">/*---------------------------------------------------------------------------
Returns the closest Point on Line &quot;AB&quot; to Point &quot;p&quot;:
&nbsp;
p			-Point, the Point to constrain to the line.
A			-Point, beginning Point of Line.
B			-Point, ending Point of Line.
as_seg	-Boolean, limits return Point between endpoints of A and B.
----------------------------------------------------------------------------*/</span>
<span style="color: #000000; font-weight: bold;">function</span> constrainPointToLine<span style="color: #66cc66;">&#40;</span>p:Point,A:Point,B:Point,as_seg:<span style="color: #0066CC;">Boolean</span>=<span style="color: #000000; font-weight: bold;">false</span><span style="color: #66cc66;">&#41;</span>:Point
<span style="color: #66cc66;">&#123;</span>
    <span style="color: #000000; font-weight: bold;">var</span> cp:Point=<span style="color: #000000; font-weight: bold;">new</span> Point<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>;
    <span style="color: #000000; font-weight: bold;">var</span> dx:<span style="color: #0066CC;">Number</span>;
    <span style="color: #000000; font-weight: bold;">var</span> dy:<span style="color: #0066CC;">Number</span>;
    <span style="color: #000000; font-weight: bold;">var</span> t:<span style="color: #0066CC;">Number</span>;
&nbsp;
    dx = B.<span style="color: #006600;">x</span> - A.<span style="color: #006600;">x</span>;
    dy = B.<span style="color: #006600;">y</span> - A.<span style="color: #006600;">y</span>;
    <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>dx == <span style="color: #cc66cc;">0</span> &amp;&amp; dy == <span style="color: #cc66cc;">0</span><span style="color: #66cc66;">&#41;</span> <span style="color: #66cc66;">&#123;</span>
        cp.<span style="color: #006600;">x</span> = A.<span style="color: #006600;">x</span>;
        cp.<span style="color: #006600;">y</span> = A.<span style="color: #006600;">y</span>;
    <span style="color: #66cc66;">&#125;</span><span style="color: #b1b100;">else</span><span style="color: #66cc66;">&#123;</span>
        t = <span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#40;</span>p.<span style="color: #006600;">x</span> - A.<span style="color: #006600;">x</span><span style="color: #66cc66;">&#41;</span> * dx + <span style="color: #66cc66;">&#40;</span>p.<span style="color: #006600;">y</span> - A.<span style="color: #006600;">y</span><span style="color: #66cc66;">&#41;</span> * dy<span style="color: #66cc66;">&#41;</span> / <span style="color: #66cc66;">&#40;</span>dx * dx + dy * dy<span style="color: #66cc66;">&#41;</span>;
        <span style="color: #b1b100;">if</span> <span style="color: #66cc66;">&#40;</span>as_seg<span style="color: #66cc66;">&#41;</span><span style="color: #66cc66;">&#123;</span>
			t = <span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">min</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">Math</span>.<span style="color: #0066CC;">max</span><span style="color: #66cc66;">&#40;</span><span style="color: #cc66cc;">0</span>,t<span style="color: #66cc66;">&#41;</span>,<span style="color: #cc66cc;">1</span><span style="color: #66cc66;">&#41;</span>;
		<span style="color: #66cc66;">&#125;</span>
        cp.<span style="color: #006600;">x</span> = A.<span style="color: #006600;">x</span> + t * dx;
        cp.<span style="color: #006600;">y</span> = A.<span style="color: #006600;">y</span> + t * dy;
    <span style="color: #66cc66;">&#125;</span>
    <span style="color: #b1b100;">return</span> cp;
<span style="color: #66cc66;">&#125;</span>
&nbsp;</pre>
<a href='http://www.hexosearch.com/se/submit.aspx?zlvz=&zqz=&zurlz=http://keith-hair.net/blog/2008/12/27/constrain-a-point-to-a-line/&ztz=Constrain a Point to a Line'><img src='http://keith-hair.net/blog/wp-content/plugins/hexosearch-button/logo16x16.png' width='16' height='16' border='0' style='vertical-align:middle' alt='Vote in HexoSearch' title='Vote in HexoSearch' /></a>]]></content:encoded>
			<wfw:commentRss>http://keith-hair.net/blog/2008/12/27/constrain-a-point-to-a-line/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
