''
'' This code is part of Document Solutions for Imaging demos.
'' Copyright (c) MESCIUS inc. All rights reserved.
''
Imports System
Imports System.IO
Imports System.Drawing
Imports System.Collections.Generic
Imports System.Linq
Imports System.Numerics
Imports System.Xml
Imports GrapeCity.Documents.Drawing
Imports GrapeCity.Documents.Text
Imports GrapeCity.Documents.Imaging
Imports GrapeCity.Documents.Svg
'' This example shows how to combine SVG elements to create clipping paths
'' that are used to effectively merge geometric figures.
'' Parts of the image are associated with SVG title elements which show
'' as tooltips if the SVG is displayed in a browser.
Public Class SvgMergedShapes
Public ReadOnly Property DefaultMime As String
Get
Return Util.MimeTypes.SVG
End Get
End Property
Public Function GenerateImageStream(
ByVal targetMime As String,
ByVal pixelSize As Size,
ByVal dpi As Single,
ByVal opaque As Boolean,
Optional ByVal sampleParams As String() = Nothing) As Stream
If targetMime <> Util.MimeTypes.SVG Then
Throw New Exception("This sample only supports SVG output format.")
End If
Using svgDoc As New GcSvgDocument()
Dim svg = svgDoc.RootSvg
Dim items = svg.Children
Dim width = New SvgLength(pixelSize.Width)
Dim height = New SvgLength(pixelSize.Height)
svg.Width = width
svg.Height = height
'' Root title:
Dim title = New SvgTitleElement()
items.Add(title)
title.Children.Add(New SvgContentElement(XmlNodeType.Text) With {
.Content = "Root SVG Title"
})
'' Root bounds:
Dim bounds = New SvgRectElement() With {
.X = New SvgLength(0),
.Y = New SvgLength(0),
.Width = width,
.Height = height,
.Stroke = New SvgPaint(New SvgColor(Color.DarkBlue)),
.Fill = New SvgPaint(New SvgColor(Color.DarkSeaGreen))
}
items.Add(bounds)
'' Geometry:
Dim centerX As Single = 200.0F
Dim centerY As Single = 200.0F
Dim radius As Single = 190.0F
Dim polyWidth As Single = 180.0F
Dim polyHeight As Single = 320.0F
Dim polyD As Single = 30.0F
Dim pad As Single = 10.0F
'' We add an outer group to hold everything else,
'' so that it can be easily positioned within the overall bounds:
Dim outerGroup = New SvgGroupElement()
items.Add(outerGroup)
items = outerGroup.Children
'' Center the group:
Dim outerGroupTranslateX = New SvgLength(pixelSize.Width / 2.0F - centerX)
Dim outerGroupTranslateY = New SvgLength(pixelSize.Height / 2.0F - centerY - polyHeight / 2.0F)
outerGroup.Transform = New List(Of SvgTransform) From {
New SvgTranslateTransform() With {.TranslateX = outerGroupTranslateX, .TranslateY = outerGroupTranslateY}
}
'' Add a 'defs' element containing clipPath elements
'' that will be used to merge various geometric figures
'' to provide a complex clipping path:
Dim defs = New SvgDefsElement()
items.Add(defs)
'' Create the outer clip built by adding a circle and a polygon
'' resembling an inverted keystone, so that the union of the two figures
'' looks like a keyhole:
Dim clipPathOuter = New SvgClipPathElement() With {.ID = "outerClip"}
defs.Children.Add(clipPathOuter)
clipPathOuter.Children.Add(New SvgCircleElement() With {
.CenterX = New SvgLength(centerX),
.CenterY = New SvgLength(centerY),
.Radius = New SvgLength(radius)
})
clipPathOuter.Children.Add(New SvgPolygonElement() With {
.Points = New List(Of SvgPoint) From {
New SvgPoint(New SvgLength(centerX - polyWidth / 2.0F), New SvgLength(centerY + radius * 0.8F)),
New SvgPoint(New SvgLength(centerX - polyWidth / 2.0F - polyD), New SvgLength(centerY + radius + polyHeight)),
New SvgPoint(New SvgLength(centerX + polyWidth / 2.0F + polyD), New SvgLength(centerY + radius + polyHeight)),
New SvgPoint(New SvgLength(centerX + polyWidth / 2.0F), New SvgLength(centerY + radius * 0.8F))
}
})
'' Create the inner clip by adding a smaller circle and a rectangle
'' that is smaller than the keystone polygon:
Dim clipPathInner = New SvgClipPathElement() With {.ID = "innerClip"}
defs.Children.Add(clipPathInner)
clipPathInner.Children.Add(New SvgCircleElement() With {
.CenterX = New SvgLength(centerX),
.CenterY = New SvgLength(centerY),
.Radius = New SvgLength(radius - pad)
})
clipPathInner.Children.Add(New SvgRectElement() With {
.X = New SvgLength(centerX - polyWidth / 2.0F + pad),
.Y = New SvgLength(centerY + radius * 0.8F),
.Width = New SvgLength(polyWidth - pad * 2.0F),
.Height = New SvgLength(polyHeight - pad * 2.0F)
})
'' A filled rectangle taking up the whole SVG area (100%x100%)
'' but clipped by the "outerClip" figure:
Dim rcOuter = New SvgRectElement() With {
.Width = New SvgLength(width.Value - outerGroupTranslateX.Value),
.Height = New SvgLength(height.Value - outerGroupTranslateY.Value),
.Fill = New SvgPaint(Color.DarkBlue),
.ClipPath = New SvgReference("outerClip")
}
items.Add(rcOuter)
Dim descR = New SvgTitleElement()
descR.Children.Add(New SvgContentElement(XmlNodeType.Text) With {
.Content = "Title of the dark blue rectangle"
})
rcOuter.Children.Add(descR)
'' Group clipped by the "innerClip", this will contain
'' a yellow fill and a rotated semi-transparent raster image:
Dim groupEl = New SvgGroupElement() With {
.ClipPath = New SvgReference("innerClip")
}
items.Add(groupEl)
'' We add to the group clipped by "innerClip"
'' a filled rectangle taking up the whole area (100%x100%):
Dim rcInner = New SvgRectElement() With {
.Width = New SvgLength(width.Value - outerGroupTranslateX.Value),
.Height = New SvgLength(height.Value - outerGroupTranslateY.Value),
.Fill = New SvgPaint(Color.DarkOrange)
}
groupEl.Children.Add(rcInner)
Dim desc = New SvgTitleElement()
rcInner.Children.Add(desc)
desc.Children.Add(New SvgContentElement(XmlNodeType.Text) With {
.Content = "Title of the dark orange rectangle"
})
'' We also add to the group an image that is rotated
'' and drawn semi-transparently:
Dim imagePath = Path.Combine("Resources", "Images", "colosseum-resized.jpg")
Dim bmp = New GcBitmap(imagePath)
Dim imgTranslateX = New SvgLength(188)
Dim imgTranslateY = New SvgLength(-55)
Dim img = New SvgImageElement() With {
.Href = New SvgReference(bmp, True) With {.InJpegFormat = True},
.Width = New SvgLength(400),
.Height = New SvgLength(525),
.Transform = New List(Of SvgTransform) From {
New SvgTranslateTransform() With {.TranslateX = imgTranslateX, .TranslateY = imgTranslateY},
New SvgRotateTransform() With {.Angle = New SvgAngle(30)}
},
.Opacity = 0.8F
}
groupEl.Children.Add(img)
Dim descImg = New SvgTitleElement()
img.Children.Add(descImg)
descImg.Children.Add(New SvgContentElement(XmlNodeType.Text) With {
.Content = "Title of the image"
})
'' Save SVG to the output Stream
Dim ms As New MemoryStream()
svgDoc.Save(ms, New XmlWriterSettings() With {.Indent = True})
ms.Seek(0, SeekOrigin.Begin)
Return ms
End Using
End Function
End Class