StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>@Amr has the right idea. I'll give you this code with the caveat that I haven't tested it at all. I took the line segment intersection algorithm from <a href="http://paulbourke.net/geometry/lineline2d/" rel="nofollow">here</a>.</p> <p>First, you need to set up a list of Rectangles and add them to the canvas that are your "pixels":</p> <pre><code> private List<Rectangle> _rects = new List<Rectangle>(); private void GenerateRects() { int width = 300; // or whatever dimensions... int height = 300; int gridSize = 50; for (int x = 0; x < width; x += gridSize) { for (int y = 0; y < height; y += gridSize) { var rect = new Rectangle { Opacity = 0, Width = Math.Min(gridSize, width - x), Height = Math.Min(gridSize, height - y), }; Canvas.SetLeft(rect, x); Canvas.SetTop(rect, y); _rects.Add(rect); this.paint.Children.Add(rect); } } } </code></pre> <p>We'll need these helper methods:</p> <pre><code> class LineSegment { public double X1 { get; set; } public double X2 { get; set; } public double Y1 { get; set; } public double Y2 { get; set; } } private static bool SegmentsIntersect(LineSegment A, LineSegment B) { double x1 = A.X1, x2 = A.X2, x3 = B.X1, x4 = B.X2; double y1 = A.Y1, y2 = A.Y2, y3 = B.Y1, y4 = B.Y2; double denominator = (y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1); if (denominator == 0) return false; double ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator; double ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator; return (ua > 0 && ua < 1 && ub > 0 && ub < 1); } private static bool RectIntersectsLine(Rect A, LineSegment B) { return (SegmentsIntersect(B, new LineSegment { X1 = A.X, Y1 = A.Y, X2 = A.X, Y2 = A.Y + A.Height }) || SegmentsIntersect(B, new LineSegment { X1 = A.X, Y1 = A.Y + A.Height, X2 = A.X + A.Width, Y2 = A.Y + A.Height }) || SegmentsIntersect(B, new LineSegment { X1 = A.X + A.Width, Y1 = A.Y + A.Height, X2 = A.X + A.Width, Y2 = A.Y }) || SegmentsIntersect(B, new LineSegment { X1 = A.X + A.Width, Y1 = A.Y, X2 = A.X, Y2 = A.Y }) || RectContainsPoint(A, new Point(B.X1, B.Y1)) || RectContainsPoint(A, new Point(B.X2, B.Y2))); } private static bool RectContainsPoint(Rect A, Point B) { return (B.X > A.X && B.X < A.X + A.Width && B.Y > A.Y && B.Y < A.Y + A.Height); } </code></pre> <p>Then, in the FingerMove function, we loop through each Rectangle to see if it intersects. If it does, we change its color:</p> <pre><code> void FingerMove(object sender, MouseEventArgs e) { if (this.IsDrawing) { this.DestinationPoint = e.GetPosition(paint); LineSegment line = new LineSegment { X1 = this.DestinationPoint.X, Y1 = this.DestinationPoint.Y, X2 = this.OriginPoint.X, Y2 = this.OriginPoint.Y }; foreach (var rect in _rects) { var x = Canvas.GetLeft(rect); var y = Canvas.GetTop(rect); if (RectIntersectsLine(new Rect(x, y, rect.Width, rect.Height) , line)) { rect.Opacity = 1; rect.Fill = Color; } } } this.OriginPoint = this.DestinationPoint; } </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload