Silverlight 网络漫画

下载 comic.zip - 2.74 MB

引言

当 Visual Studio 2010 还在 beta 阶段时，我参加了微软在墨西哥举办的一项比赛，目的是开发一个使用新的 .NET framework 4.0 的应用程序，奖品是一台笔记本电脑。因为我喜欢学习新技术（比如 ajax、wpf、linq、kinect 的 sdk、google 地图、google 文档、Verifones TPV、指纹识别、csc、xcode、android 开发等等）。我想学习 Silverlight，因为我不知道 Silverlight，而且我喜欢画画，我想拥有自己的页面来创建一个简单的漫画。我搜索了一下是否有现有的漫画创作页面，但我只找到几个，所以我决定学习 Silverlight 并提交一个 Silverlight 应用程序来创建一个网络漫画参加比赛。

背景

当我学习该职业时，我曾经开发过一个简单的程序，用于在 C++ Builder 中在 2D 和 3D 画布上绘制简单的图形。我的 2D 简单画图程序的可执行文件在这里，3D 的在这里。之后我在 Java applet 和 Flash 上做了一个更简单的画图程序。所以我知道如何在画布上绘画，使用画布的拖放事件，并且 Silverlight 上的画布包含拖放方法，并且可以轻松打印画布。你可以在这里观看漫画的运行情况。说明和页面是西班牙语的，因为比赛是在墨西哥举行的，所以我用西班牙语开发了这个页面。

使用代码

我从最基本的例子开始，我把一组画布放在一个网页上的 MainCanvas 中，我把 AllowDrop 属性设置为 true，并使用拖放事件将图片从我的电脑拖放到网页上。像这样

<Canvas Height="800" HorizontalAlignment="Left" Margin="0,0,0,0" Name="canvasComic" VerticalAlignment="Top" Width="735" Background="White">
    <Canvas Canvas.Left="17"  Canvas.Top="16"  Height="198" Name="box1" Width="705" Background="#FFFC1717" AllowDrop="True" />
    <Canvas Canvas.Left="17"  Canvas.Top="226" Height="181" Name="box2" Width="220" AllowDrop="True" Background="#FFDFF206" />
    <Canvas Canvas.Left="260" Canvas.Top="226" Height="181" Name="box3" Width="220" AllowDrop="True" Background="#FF17A00C" />
    <Canvas Canvas.Left="502" Canvas.Top="226" Height="181" Name="box4" Width="220" AllowDrop="True" Background="#FF03F8F8" />
    <Canvas Canvas.Left="17"  Canvas.Top="421" Height="160" Name="box5" Width="345" AllowDrop="True" Background="#FF155BCB"/>
    <Canvas Canvas.Left="378" Canvas.Top="421" Height="160" Name="box6" Width="345" AllowDrop="True" Background="#FFAE16F2" />
</Canvas>            

之后，在代码中，我为所有画布的 drop 事件添加了一个函数，用于接收图像并将其大小调整为画布的大小。代码如下

 Private Sub Canvas_Drop(ByVal sender As System.Object, ByVal e As System.Windows.DragEventArgs) Handles MyBase.Drop, box1.Drop, box2.Drop, box3.Drop, box4.Drop, box5.Drop, box6.Drop
        Dim dataObject As IDataObject = e.Data 'For know what is the canvas of the image was dropped
        Dim dropPoint As Point = e.GetPosition(sender) 'For know the position of the image was dropped
        If dataObject.GetDataPresent(DataFormats.FileDrop) Then 'If a file was dropped
            Dim files As FileInfo() = DirectCast(dataObject.GetData(DataFormats.FileDrop), FileInfo()) 'Get the info of the file dropped
            If files.Length > 0 Then
                sender.Children.Clear()
                'A filter to only accept images files (.jpg, .png or gifs)
                If files(0).Extension.ToLower = ".jpg" Or files(0).Extension.ToLower = ".png" Or files(0).Extension.ToLower = ".gif" Then
                    Dim bitmapImage As New System.Windows.Media.Imaging.BitmapImage() 'For copy the image dropped
                    bitmapImage.SetSource(files(0).OpenRead()) 'Copy the image to a bitmap
                    Dim newImage As New Image() 'Create a new image for copy the image
                    'For put the image on the coordinates 0,0
                    dropPoint.Y = 0
                    dropPoint.X = 0
                    'Resize the image to the size of the canvas
                    newImage.Width = sender.Width
                    newImage.Height = sender.Height
                    newImage.Source = bitmapImage
                    newImage.SetValue(Canvas.TopProperty, dropPoint.Y)
                    newImage.SetValue(Canvas.LeftProperty, dropPoint.X)
                    newImage.Stretch = Stretch.Fill
                    'Add the image at the canvas
                    sender.Children.Add(newImage)
                End If
            End If
        End If
    End Sub

对于气球，我创建了一个类，用于保存一个 textblock 以包含气球的文本，气球的位置，气球的类型和气球的图形，以及用于在画布上移动气球的事件

Imports System.IO
Imports System.Windows.Printing
Imports System.Windows.Media.Imaging

Public Class cFigure
    Public tb As New TextBlock
    Public type As MainPage.eFigure
    Public iNumber As Integer
    Public iChildren As Integer
    Public bAux As Boolean
    Public iPosition As Point
    Public newImage As New Image()
    ''' <summary>
    ''' Set the ballon and the text and the mouse events
    ''' </summary>
    ''' <param name="sText">Text for the ballon</param>
    ''' <param name="pPosition">Coordinates (x,y) for the location of the ballon</param>
    ''' <param name="typeFigure">The Type of figure</param>
    ''' <param name="iActualBallon">The number of the ballon in the list of ballons</param>
    ''' <remarks></remarks>
    Public Sub SetImage(ByVal sText As String, ByVal pPosition As Point, ByVal typeFigure As MainPage.eFigure, ByVal iActualBallon As Integer)
        Dim sFigure As String = ""
        'Set the text to the combobox
        tb.Text = "  " + sText
        'Save the color of the text
        tb.Foreground = New SolidColorBrush(Colors.Black)
        'Set options to center the text and automatic wordwrap
        tb.TextAlignment = System.Windows.TextAlignment.Center
        tb.TextWrapping = TextWrapping.Wrap
        type = typeFigure
        iNumber = iActualBallon
        'Set the image of the ballon
        Select Case type
            Case MainPage.eFigure.leftCloud
                sFigure = "Images/left_cloud.png"
            Case MainPage.eFigure.rightCloud
                sFigure = "Images/right_cloud.png"
            Case MainPage.eFigure.rightOval
                sFigure = "Images/rght_oval.png"
            Case MainPage.eFigure.leftOval
                sFigure = "Images/left_oval.png"
            Case MainPage.eFigure.rightBox
                sFigure = "Images/right_box.png"
            Case MainPage.eFigure.leftBox
                sFigure = "Images/left_box.png"
            Case MainPage.eFigure.Box
                sFigure = "Images/box.png"
        End Select
        'The uri of the image of the ballon
        Dim uriImage As New Uri(sFigure, UriKind.Relative)
        'Get the stream of the image of the ballon
        Dim oImageStream As Stream = Application.GetResourceStream(uriImage).Stream
        'Create a new Image for the ballon
        Dim oImage As New BitmapImage()
        'Set the image of the ballon
        oImage.SetSource(oImageStream)
        'Set the size proportional to the text only for the ballons.    
        newImage.Width = tb.ActualWidth + 50
        newImage.Height = tb.ActualHeight
        'If the figure is different of the box add a space for center the text
        If type <> MainPage.eFigure.Box Then
            newImage.Height += 30
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 8)
        Else
            newImage.Height += 10
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 5)
        End If
        tb.SetValue(Canvas.LeftProperty, pPosition.X + 18)
        newImage.SetValue(Canvas.LeftProperty, pPosition.X)
        newImage.SetValue(Canvas.TopProperty, pPosition.Y)
        iPosition.Y = tb.GetValue(Canvas.TopProperty)
        iPosition.X = tb.GetValue(Canvas.TopProperty)
        'Set the ballon with text
        newImage.Source = oImage
        newImage.Stretch = Stretch.Fill
        'Set the events for the ballon
        AddHandler newImage.MouseLeftButtonDown, AddressOf Image_Mouse_Button_Down
        AddHandler newImage.MouseMove, AddressOf Image_Mouse_Button_Move
        AddHandler newImage.MouseLeftButtonUp, AddressOf Image_Mouse_Button_Up
    End Sub
    ''' <summary>
    ''' Set the position of the ballon
    ''' </summary>
    ''' <param name="pPosition">Coordinates (x,y) for the location of the ballon</param>
    ''' <remarks></remarks>
    Public Sub SetPosition(ByVal pPosition As Point)
        newImage.SetValue(Canvas.TopProperty, pPosition.Y)
        newImage.SetValue(Canvas.LeftProperty, pPosition.X)
        If type <> MainPage.eFigure.Box Then
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 8)
        Else
            tb.SetValue(Canvas.TopProperty, pPosition.Y + 5)
        End If
        tb.SetValue(Canvas.LeftProperty, pPosition.X + 18)
        iPosition.Y = tb.GetValue(Canvas.TopProperty)
        iPosition.X = tb.GetValue(Canvas.LeftProperty)
    End Sub
    Private Sub Image_Mouse_Button_Down(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
        bAux = True
        MainPage.iActualCloud = iNumber
    End Sub
    Private Sub Image_Mouse_Button_Move(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseEventArgs)

    End Sub
    Private Sub Image_Mouse_Button_Up(ByVal sender As System.Object, ByVal e As System.Windows.Input.MouseButtonEventArgs)
        bAux = False
    End Sub
End Class

之后我添加了气球。我添加了一个 textbox，用于包含气球的文本，以及 7 个按钮，用于表示不同类型的气球，我获取了气球的图像并将图像保存在 Silverlight 应用程序的 Images 文件夹中。

因此，要包含一个气球，你需要设置文本并按下要添加的气球的按钮，然后将其拖到画布上。我将所有气球添加到一个 ComboBox 中，以便用户选择一个气球并可以修改气球的位置。

我使用 printdocument 打印包含所有画布的漫画

' create an instance of PrintDocument
Dim document As New PrintDocument()
' Add the handlers for print canvasComic is the canvas that contains the box of the page
AddHandler document.BeginPrint, Function(s, args) CanvasBeginPrint(s, args)
AddHandler document.PrintPage, Function(s, args) CanvasPrintPage(s, args, canvasComic)
AddHandler document.EndPrint, Function(s, args) CanvasEndPrint(s, args, canvasComic)
' call the Print() with a proper name which will be visible in the Print Queue
document.Print("Printing Comic")

关注点

目前，我仅将气球保存在 xml 中。我将研究如何保存添加到画布的图像。 使用新的 HTML5 canvas，我认为我将使用 html5 和可能的 php 和 mysql 来保存漫画，至少 html5 的 canvas 包含一个将 canvas 保存为图像的函数。

但是在目前，我不知道如何使用 Silverlight 将画布保存为图像。因此，在我切换到 html5 之前，我将向该项目添加更多功能。例如，设置气球文本的大小，字体和颜色，保存在 sql 数据库中，并添加一组预定义的画布，以及一个用于保存具有多个页面的漫画的选项。并且在每个页面中，用户都可以保存对漫画的评论。

感谢大家的建议、评论和报告您发现的错误。