Question

I’m implementing a colour picker component as described in this seminal article.

As you can see, I’ve got the basics sorted:

One of the requirements however, is the ability to have the colour wheel rotated by an arbitrary amount. Thinking this would be easy, I some arithmetic to the mouse location -> colour value code and the following code to the bit that actually paints the wheel:

newGraphics.TranslateTransform((float)this.Radius, (float)this.Radius);
newGraphics.RotateTransform((float)this.offset);
newGraphics.TranslateTransform((float)this.Radius * -1, (float)this.Radius * -1);

Unfortunately, rotating the bitmap like this actually produces this:

Note the artefacts that appear either side of the centre.

Am I using the wrong approach? Or is there a way to get rid of these nasty rips?

Answer 1

Looking at the source code from that Microsoft example, I made the following change to the UpdateDisplay method by adding a matrix and setting the RotateAt method.

private void UpdateDisplay() {
  // Update the gradients, and place the 
  // pointers correctly based on colors and 
  // brightness.

  using (Brush selectedBrush = new SolidBrush(selectedColor)) {      
    using (Matrix m = new Matrix()) {
      m.RotateAt(35f, centerPoint);
      g.Transform = m;
      // Draw the saved color wheel image.
      g.DrawImage(colorImage, colorRectangle);
      g.ResetTransform();
    }

    // Draw the "selected color" rectangle.
    g.FillRectangle(selectedBrush, selectedColorRectangle);

    // Draw the "brightness" rectangle.
    DrawLinearGradient(fullColor);
    // Draw the two pointers.
    DrawColorPointer(colorPoint);
    DrawBrightnessPointer(brightnessPoint);
  }
}

It rotated the wheel 35 degrees (although the color selection was off now by, well, 35 degrees since I didn’t mess with all the code) and it didn’t produce any tearing.

Not 100% sure this is the answer (but too long for a comment), so maybe this is helpful.