I'm trying to do some drawing operations in Blazor and would like to draw some objects depending on user selection. Therefore I'm trying to pass a long string argument to SVG to draw required elements.
Object class and methods
public class SupportRoller
{
public Point2D P1 { get; set; }
public Point2D P2 { get; set; }
public Point2D P3 { get; set; }
public Point2D L1 { get; set; }
public Point2D L2 { get; set; }
public Point2D C1 { get; set; }
public Point2D C2 { get; set; }
public static List<SupportRoller> SupportCoordinates(Point2D pinPoint, double scale)
{
var point1 = new Point2D(pinPoint.X * scale, pinPoint.Y * scale);
var point2 = new Point2D((pinPoint.X 2.08) * scale, (pinPoint.Y 4) * scale);
var point3 = new Point2D((pinPoint.X - 2.08) * scale, (pinPoint.Y 4) * scale);
var line1 = new Point2D((pinPoint.X 2.08) * scale, (pinPoint.Y 5) * scale);
var line2 = new Point2D((pinPoint.X - 2.08) * scale, (pinPoint.Y 5) * scale);
var circle1 = new Point2D((((line2.X - line1.X) / 3) line2.X) * scale, (pinPoint.Y 7) * scale);
var circle2 = new Point2D((((line2.X - line1.X) / 3) circle1.X) * scale, (pinPoint.Y 7) * scale);
var result = new List<SupportRoller>()
{
new SupportRoller() {P1 = point1, P2 = point2, P3 = point3, L1 = line1, L2 = line2, C1 = circle1, C2 = circle2}
};
return result;
}
public static string CoordinatesToString(List<SupportRoller> pointList)
{
string s1x = pointList[0].P1.X.ToString();
string s1y = pointList[0].P1.Y.ToString();
string s2x = pointList[0].P2.X.ToString();
string s2y = pointList[0].P2.Y.ToString();
string s3x = pointList[0].P3.X.ToString();
string s3y = pointList[0].P3.Y.ToString();
//string result1 = "<polygon points=\'" s1x "," s1y " " s2x "," s2y " " s3x "," s3y "\' />";
//Console.WriteLine(result1);
string l1x = pointList[0].L1.X.ToString();
string l1y = pointList[0].L1.Y.ToString();
string l2x = pointList[0].L2.X.ToString();
string l2y = pointList[0].L2.Y.ToString();
//string result2 = "<line x1 = \'" l1x "\' y1=\"" l1y "\' x2=\"" l2x "\' y2=\"" l2y "\' stroke=\'black\' stroke-width=\'0.2\' />";
string c1x = pointList[0].C1.X.ToString();
string c1y = pointList[0].C1.Y.ToString();
string c2x = pointList[0].C2.X.ToString();
string c2y = pointList[0].C2.Y.ToString();
var radius = 4;
string result = "<polygon points=\'" s1x "," s1y " " s2x "," s2y " " s3x "," s3y "\' /><line x1 = \'" l1x "\' y1=\'" l1y "\' x2=\'" l2x "\' y2=\'" l2y "\' stroke=\'black\' stroke-width=\'0.2\' /><circle cx=\'" c1x "\' cy=\'" s1y "\' r=\'" radius "\' /> <circle cx=\'" s2x "\' cy=\'" s2y "\' r=\'" radius "\' />";
Console.WriteLine(result);
//var resultMod1 = result.Remove('\"');
//var resultMod1 = result.Replace("\"", "");
Console.WriteLine(result);
return result;
}
}
I would like to display string in SVG however nothing is shown because string is passed with start and end "" and is therefore ignored.
Below is displayed in html where variable is called:
<g>@mainDwg.EndSupport</g>
<g>"<polygon points='190,50 192.08,54 187.92,54' />
<line x1 = '192.08' y1='55' x2='187.92' y2='55' stroke='black' stroke-width='0.2' />
<circle cx='186.5333333333333' cy='50' r='4' /><circle cx='192.08' cy='54' r='4' />"</g>
Calling it as below
mainDwg.EndSupport = SupportRoller.CoordinatesToString(endSupCoordRoller).Trim();
I tried to trim string with multiple function but no success.
yourString = yourString.Replace('"', ' ').Trim();
yourString= yourString.Trim('"');
yourString=yourString.Replace("\"", "");
yourString = yourString.Replace("\"", string.Empty).Trim();
Anybody can help with this? Just instead of "Your string" I need to pass only Your string. Thanks.
CodePudding user response：
I'm not sure how are you getting the quotation marks, but you have to cast the result of CoordinatesToString to MarkupString for it to be rendered. string is treated as simple text.
Here is Blazor example code:
<p>@someHtml</p>
<p>@((MarkupString)someHtml)</p>
<svg>@polygon</svg>
<svg>@((MarkupString)polygon)</svg>
@code{
string someHtml => "<strong>lorem ipsum</strong>";
string polygon => @"<polygon points='190,50 192.08,54 187.92,54' />
<line x1 = '192.08' y1='55' x2='187.92' y2='55' stroke='black' stroke-width='0.2' />
<circle cx='186.5333333333333' cy='50' r='4' /><circle cx='192.08' cy='54' r='4' />";
}
And here is rendered html:
<!--!--><p><strong>lorem ipsum</strong></p><!--!-->
<p><!--!--><strong>lorem ipsum</strong></p><!--!-->
<svg><polygon points='190,50 192.08,54 187.92,54' />
<line x1 = '192.08' y1='55' x2='187.92' y2='55' stroke='black' stroke-width='0.2' />
<circle cx='186.5333333333333' cy='50' r='4' /><circle cx='192.08' cy='54' r='4' /></svg><!--!-->
<svg><!--!--><polygon points="190,50 192.08,54 187.92,54"></polygon>
<line x1="192.08" y1="55" x2="187.92" y2="55" stroke="black" stroke-width="0.2"></line>
<circle cx="186.5333333333333" cy="50" r="4"></circle><circle cx="192.08" cy="54" r="4"></circle></svg>CodePudding user response：
@mcbr has it right. You need to declare the string as markup. Or, if you are sure you will have a <polygon>, then I'd consider building a string of the points only, and injecting them as a string: <polygon points='@pointString'/> Another option would be to create Blazor wrappers for the SVG stuff, so that you can more easily use C# logic:
<MyPoly>
@foreach (var item in DataItems){
<MyPolyPoint x="item.X" y="item.Y" />
}
</MyPoly>