透明的图像Photoshop的背景一样 [英] Photoshop like background on transparent image

问题描述

我正在为我的类项目一个图形编辑器，我想这样做时，例如用户在编辑器或加载一幅图片或绘制在PictureBox的东西，所有的字母部分会显示在棋盘类似的背景。

I'm making a graphics editor for my class project and i want to make so that when, for example a user loads a picture in to the editor or or draw something in the PictureBox, all the alpha parts are shown the chessboard like background.

我的想法是，当我创建一个透明背景设定一个PictureBox，我创建它背后一个又一个，它的背景色设置为白色，并添加灰度图像的50x50交替水平和垂直。那是一个很好的解决问题的方法？如果不是你有什么建议吗？

My idea is that when I create a PictureBox with transparent background set, I create another one behind it, set its BackColor to white and add grey images 50x50, alternately horizontally and vertically. Is that a good approach to the problem? If, not do You have any suggestions?

在Photoshop中，例如，我创建图像1600x1600。当我放大到一定的水平，它缩小的框，并增加了更多的人来填补的图像。如果You'we采用了类似计划的Photoshop，你知道我的意思。现在，我将如何去实现同样的效果？

In Photoshop, for example, I create image 1600x1600. When I zoom to a certain level, it shrinks the boxes and adds more of them to fill the image. If You'we used Photoshop of similar program you know what I mean. Now, how would I go about achieving the same effect?

推荐答案

创建一个Photoshop一样的程序是一个有趣的项目。

Creating a Photoshop-like program is a fun project.

有将沿着自己的方式许多挑战，这是非常值得思维超前一点...

There will be many challenges along your way and it is well worth thinking ahead a little..

下面是一个东西短，不完整的名单要记住：

Here is a short and incomplete list of things to keep in mind:

• 图纸和油漆动作


• 撤销，重做修改


• 多层


• 缩放和滚动


• 保存和打印

• Draw- and paint actions
• Undo, redo, edit
• Multiple layers
• Zooming and scrolling
• Saving and printing

于是得到一个棋盘背景仅仅是一个漫长的旅程。

So getting a checkerboard background is only the start of a long journey..

使用的开始图片框为基础的画布是一个非常不错的选择，因为它的几层会有所帮助。下面是一段代码，将为您提供一个灵活的棋盘背景，当你达到真正的图形，将甚至保持其尺寸：

Using a PictureBox as the base canvas is a very good choice, as its several layers will help. Here is a piece of code that will provide you with a flexible checkerboard background, that will keep its size even when you scale the real graphics:

void setBackGround(PictureBox pb, int size, Color col)
{   
    if (size == 0 && pb.BackgroundImage != null)
    {
        pb.BackgroundImage.Dispose();
        pb.BackgroundImage = null;
        return;
    }
    Bitmap bmp = new Bitmap(size * 2, size * 2);
    using (SolidBrush brush = new SolidBrush(col))
    using (Graphics G = Graphics.FromImage(bmp) )
    {
        G.FillRectangle(brush, 0,0,size, size);
        G.FillRectangle(brush, size,size, size, size);
    }
    pb.BackgroundImage = bmp;
    pb.BackgroundImageLayout = ImageLayout.Tile;
}

加载图像进行测试，这是什么，你会得到的，离开正常在右放大：

Load an Image for testing and this is what you'll get, left normal, right zoomed in:

是的，这节约背景应该被删除;你可以在代码中看到，传递一个大小= 0将这样做。

Yes, for saving this background should be removed; as you can see in the code, passing in a size = 0 will do that.

下一步是什么？让我给你如何从上面的方法的各种任务的一些提示：

What next? Let me give you a few hints on how to approach the various tasks from above:

• 滚动：图片框不能滚动。相反，将其放置在一个面板与自动滚屏= TRUE ，并使其大到需要的。

• Scrolling: Picturebox can't scroll. Instead place it in a Panel with AutoScroll = true and make it as large as needed.

变焦：与尺寸和 SizeMode 将让你玩放大和缩小的图片没有问题。在的BackgroundImage 将保持未缩放，就像它在Photoshop。你将不得不但是添加一些更多的代码来放大您在PB的顶部或图层绘制图形。这里的关键是缩放使用 Graphics.MultiplyTransform（矩阵）。

Zooming: Playing with its Size and the SizeMode will let you zoom in and out the Image without problems. The BackgroundImage will stay unscaled, just as it does in Photoshop. You will have to add some more code however to zoom in on the graphics you draw on top of the PB or on the layers. The key here is scaling the Graphics object using a Graphics.MultiplyTransform(Matrix).

图层：图层是IMO在PhotoShop（及其他优质节目）的一个最有用的功能。他们可以通过嵌套透明拉丝画布来实现。 面板可以使用，我更喜欢标签。如果每个坐在在一个低于它和一个在底部有PB为父，所有的内容将显示相结合。

Layers: Layers are imo the single most useful feature in PhotoShop (and other quality programs). They can be achieved by nesting transparent drawing canvases. Panels can be used, I prefer Labels. If each is sitting inside the one below it and the one at the bottom has the PB as its Parent, all their contents will be shown combined.

• 不得直接使用标签，但创建一个子类来容纳更多的数据和技术诀窍！


• 更改它们的顺序是不是很辛苦，只是不停的嵌套结构记和完整！


• 隐藏层是通过设置一个标志和检查在绘画动作<该标志做/ li>
  
• 其他数据可以包括名称，不透明度，也许叠加的颜色。


• 的层也应在一个图层显示面板，通过创建一个缩略图和插入在 FlowLayoutPanel的 <一层userobject最好/ LI>
  

• Don't use the Label directly but create a subclass to hold additional data and know-how!
• Changing their order is not very hard, just keep the nested structure in mind and intact!
• Hiding a layer is done by setting a flag and checking that flag in the painting actions
• Other data can include a Name, Opacity, maybe an overlay color..
• The layers should also be shown in a Layers Palette, best by creating a thumbnail and inserting a layer userobject in a FlowLayoutPanel

绘制操作：这些总是在的WinForms的关键，任何绘图。当使用鼠标绘制，每一个这样的活动将创建你需要设计一个 DrawAction 类，持有做实际的绘制，如所需要的所有信息的对象：

Draw Actions: These are always the key to any drawing in WinForms. When using the mouse to draw, each such activity creates an object of a DrawAction class you need to design, which holds all info needed to do the actual drawing, like:

• 类型（矩形，filledRectangle，线，FreeHandLine（一系列点），文本，etc.etc ..）


• 颜色


• 分数


• 宽度


• 文本


• 该层上


• 甚至旋转

• Type (Rectangle, filledRectangle, Line, FreeHandLine (a series of Points), Text, etc.etc..)
• Colors
• Points
• Widths
• Text
• The layer to draw on
• maybe even a rotation

画随着LayerCanvas类DrawAction类将是项目中最重要的类，所以获得它的设计权是值得一些工作！

Along with the LayerCanvas class the DrawAction class will be the most important class in the project, so getting its design right is worth some work!

只有最上面的一层将接收鼠标事件。所以，你需要跟踪哪一层是活动之一和操作添加到自己的行动清单。当然，活性层还必须在图层面板。

Only the topmost layer will receive the mouse events. So you need to keep track which layer is the active one and add the action to its actions list. Of course the active layer must also be indicated in the Layers Palette.

由于所有的图纸都存储在列表上，实现无限次的撤销和重做是指示简单。为了能够有效地绘制和撤消，可能共同行动清单，并为每一层单独的列表是最好的设计。

Since all drawing is stored in List(s), implementing a unlimited undo and redo is simple. To allow for effective drawing and undo, maybe a common action list and an individual list for each layer is the best design..

• 撤消和重做只是物质的去除最后一个列表元素，将其推到重做堆栈。


• 编辑操作也是可以的，包括改变参数，移动它们向上或向下的操作列表或去除一个从列表的中间。它有助于显示在PhotoShop中的操作面板，如F9。


• 要拉平两层或两层以上了所有你需要的是他们的行动清单结合起来。


• 要拼合所有图层到图片你只需要画出他们不要到他们的画布，但到图片。对于绘制的到控制或到的差异位图的看到这里！在这里，我们有 PictureBox.Image 作为PB的结构，上面的 Background.Image 的第二级。 （第三是控制表面，但在顶部多层我们并不真正需要它。）

• Undo and Redo are just matter of removing the last list element and pushing it onto a redo-stack.
• Editing actions is also possible, including changing the parameters, moving them up or down the actions list or removing one from the middle of the list. It help to show an Actions Palette, like F9 in PhotoShop.
• To flatten two or more layers together all you need is to combine their action lists.
• To flatten all layers into the Image you only need to draw them not onto their canvas but into the Image. For the difference of drawing onto a control or into a Bitmap see here! Here we have the PictureBox.Image as the second level of a PB's structure above the Background.Image. (The 3rd is the Control surface, but with the multiple layers on top we don't really need it..)

保存可以通过完成由 Image.Save（）压扁所有层或后之后您已经关闭了通过的BackgroundImage告诉PB将自己画成位图（ control.DrawToBitmap（）），你可以再保存。

Saving can be done by either by Image.Save() after flattening all Layers or after you have switched off the BackgroundImage by telling the PB to draw itself into a Bitmap ( control.DrawToBitmap() ) which you can then save.

玩得开心！

这篇关于透明的图像Photoshop的背景一样的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！