none
win8 metro 怎么实现绘图的功能 RRS feed

 > 

  • 问题

  • Question
    登录进行投票
    0
    登录进行投票

    在win8 metro下怎么实习类似MFC中的绘图功能， 就是按下鼠标，拖动，然后画出一条直线。 win32中有Cpen这个类，那metro中要实现这个功能要怎么做呢？？

    有没有相关的代码，或者博客参考下呢

    2012年5月15日 13:23
    |

答案

  • Question
    登录进行投票
    0
    登录进行投票

    参考这个：

    http://msdn.microsoft.com/zh-cn/library/ms747393

    http://msdn.microsoft.com/zh-cn/library/ms751808.aspx

    使用 Line 类可以在两个点之间绘制一条直线。 下面的示例演示了几种指定线条坐标和描边属性的方法。

XAML
<CanvasHeight="300"Width="300"><!-- Draws a diagonal line from (10,10) to (50,50). --><LineX1="10"Y1="10"X2="50"Y2="50"Stroke="Black"StrokeThickness="4"/><!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. --><LineX1="10"Y1="10"X2="50"Y2="50"StrokeThickness="4"Canvas.Left="100"><Line.Stroke><RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"RadiusX="0.5"RadiusY="0.5"><RadialGradientBrush.GradientStops><GradientStopColor="Red"Offset="0"/><GradientStopColor="Blue"Offset="0.25"/></RadialGradientBrush.GradientStops></RadialGradientBrush></Line.Stroke></Line><!-- Draws a horizontal line from (10,60) to (150,60). --><LineX1="10"Y1="60"X2="150"Y2="60"Stroke="Black"StrokeThickness="4"/></Canvas>
C#C++VB
// Add a Line Element
myLine = gcnew Line();
myLine->Stroke = Brushes::LightSteelBlue;
myLine->X1 = 1;
myLine->X2 = 50;
myLine->Y1 = 1;
myLine->Y2 = 50;
myLine->HorizontalAlignment = HorizontalAlignment::Left;
myLine->VerticalAlignment = VerticalAlignment::Center;
myLine->StrokeThickness = 2;
myGrid->Children->Add(myLine);


下图显示了所呈现的 Line。

    2012年5月16日 3:09
    |
  • Question
    登录进行投票
    0
    登录进行投票

    如果您是用HTML/Javascript开发，请参考 Using graphics with canvas, SVG, and CSS3 和 Quickstart: drawing to a canvas 。

    样例代码如下。

    <!DOCTYPE html> <html>
<head>
    <title>Canvas beginePath example</title>
    <script>
    function beginDemo()
	{
		var canvas = document.getElementById("demo")
		var ctx = canvas.getContext('2d');        
		ctx.beginPath();              
		ctx.lineWidth="2";
		ctx.strokeStyle="blue";  
		ctx.moveTo(0,0);
		ctx.lineTo(150,150);
		ctx.lineTo(200,150);
		ctx.stroke();
		ctx.beginPath();
		ctx.strokeStyle="red";   
		ctx.moveTo(0,0);
		ctx.lineTo(50,150);            
		ctx.stroke();                               
	}
	</script>
</head>
    <body onload="beginDemo();">
	    <canvas id="demo" width="300" height="300"></canvas>
  </body>
</html>

    如果您是用C#, VB, C++开发，请参考 Windows.UI.Xaml.Shapes .

    样例代码如下。您也可以动态绘制直线等图形。

    <Canvas Height="300" Width="300">
  <!- - Draws a diagonal line from (10,10) to (50,50). - ->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />
</Canvas>

    Best wishes,

    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年5月16日 5:58
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    您可以用Path和贝塞尔曲线等绘制复杂图形。此外，也可以用第三方的一些图表控件。相信Windows或第三方以后会开发支持更多的用于Metro的图表控件。

    Best wishes,

    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年5月17日 1:42
    |
    版主

全部回复

  • Question
    登录进行投票
    0
    登录进行投票

    在win8 metro下怎么实习类似MFC中的绘图功能， 就是按下鼠标，拖动，然后画出一条直线。 win32中有Cpen这个类，那metro中要实现这个功能要怎么做呢？？

    有没有相关的代码，或者博客参考下呢

    我也在问，没有解答哦
    2012年5月16日 2:53
    |
  • Question
    登录进行投票
    0
    登录进行投票

    参考这个：

    http://msdn.microsoft.com/zh-cn/library/ms747393

    http://msdn.microsoft.com/zh-cn/library/ms751808.aspx

    使用 Line 类可以在两个点之间绘制一条直线。 下面的示例演示了几种指定线条坐标和描边属性的方法。

XAML
<CanvasHeight="300"Width="300"><!-- Draws a diagonal line from (10,10) to (50,50). --><LineX1="10"Y1="10"X2="50"Y2="50"Stroke="Black"StrokeThickness="4"/><!-- Draws a diagonal line from (10,10) to (50,50)
       and moves it 100 pixels to the right. --><LineX1="10"Y1="10"X2="50"Y2="50"StrokeThickness="4"Canvas.Left="100"><Line.Stroke><RadialGradientBrushGradientOrigin="0.5,0.5"Center="0.5,0.5"RadiusX="0.5"RadiusY="0.5"><RadialGradientBrush.GradientStops><GradientStopColor="Red"Offset="0"/><GradientStopColor="Blue"Offset="0.25"/></RadialGradientBrush.GradientStops></RadialGradientBrush></Line.Stroke></Line><!-- Draws a horizontal line from (10,60) to (150,60). --><LineX1="10"Y1="60"X2="150"Y2="60"Stroke="Black"StrokeThickness="4"/></Canvas>
C#C++VB
// Add a Line Element
myLine = gcnew Line();
myLine->Stroke = Brushes::LightSteelBlue;
myLine->X1 = 1;
myLine->X2 = 50;
myLine->Y1 = 1;
myLine->Y2 = 50;
myLine->HorizontalAlignment = HorizontalAlignment::Left;
myLine->VerticalAlignment = VerticalAlignment::Center;
myLine->StrokeThickness = 2;
myGrid->Children->Add(myLine);


下图显示了所呈现的 Line。

    2012年5月16日 3:09
    |
  • Question
    登录进行投票
    0
    登录进行投票

    如果您是用HTML/Javascript开发，请参考 Using graphics with canvas, SVG, and CSS3 和 Quickstart: drawing to a canvas 。

    样例代码如下。

    <!DOCTYPE html> <html>
<head>
    <title>Canvas beginePath example</title>
    <script>
    function beginDemo()
	{
		var canvas = document.getElementById("demo")
		var ctx = canvas.getContext('2d');        
		ctx.beginPath();              
		ctx.lineWidth="2";
		ctx.strokeStyle="blue";  
		ctx.moveTo(0,0);
		ctx.lineTo(150,150);
		ctx.lineTo(200,150);
		ctx.stroke();
		ctx.beginPath();
		ctx.strokeStyle="red";   
		ctx.moveTo(0,0);
		ctx.lineTo(50,150);            
		ctx.stroke();                               
	}
	</script>
</head>
    <body onload="beginDemo();">
	    <canvas id="demo" width="300" height="300"></canvas>
  </body>
</html>

    如果您是用C#, VB, C++开发，请参考 Windows.UI.Xaml.Shapes .

    样例代码如下。您也可以动态绘制直线等图形。

    <Canvas Height="300" Width="300">
  <!- - Draws a diagonal line from (10,10) to (50,50). - ->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />
</Canvas>

    Best wishes,

    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年5月16日 5:58
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票

    我用的是C++,C# 的也可以。 有这方面的？？

    2012年5月16日 7:06
    |
  • Question
    登录进行投票
    0
    登录进行投票

    如果您是用HTML/Javascript开发，请参考 Using graphics with canvas, SVG, and CSS3 和 Quickstart: drawing to a canvas 。

    样例代码如下。

    <!DOCTYPE html> <html>
<head>
    <title>Canvas beginePath example</title>
    <script>
    function beginDemo()
	{
		var canvas = document.getElementById("demo")
		var ctx = canvas.getContext('2d');        
		ctx.beginPath();              
		ctx.lineWidth="2";
		ctx.strokeStyle="blue";  
		ctx.moveTo(0,0);
		ctx.lineTo(150,150);
		ctx.lineTo(200,150);
		ctx.stroke();
		ctx.beginPath();
		ctx.strokeStyle="red";   
		ctx.moveTo(0,0);
		ctx.lineTo(50,150);            
		ctx.stroke();                               
	}
	</script>
</head>
    <body onload="beginDemo();">
	    <canvas id="demo" width="300" height="300"></canvas>
  </body>
</html>

    如果您是用C#, VB, C++开发，请参考 Windows.UI.Xaml.Shapes .

    样例代码如下。您也可以动态绘制直线等图形。

    <Canvas Height="300" Width="300">
  <!- - Draws a diagonal line from (10,10) to (50,50). - ->
  <Line
    X1="10" Y1="10"
    X2="50" Y2="50"
    Stroke="Black"
    StrokeThickness="4" />
</Canvas>

    Best wishes,

    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    不会是要求一根一根的划线把，那饼图和柱状图怎么办？

    2012年5月16日 9:41
    |
  • Question
    登录进行投票
    0
    登录进行投票
    您可以用Path和贝塞尔曲线等绘制复杂图形。此外，也可以用第三方的一些图表控件。相信Windows或第三方以后会开发支持更多的用于Metro的图表控件。

    Best wishes,

    Robin [MSFT]
    MSDN Community Support | Feedback to us
    Get or Request Code Sample from Microsoft
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    2012年5月17日 1:42
    |
    版主
  • Question
    登录进行投票
    0
    登录进行投票
    能告诉我， Windows.UI.Xaml.Shapes.Path怎么转换成图片嘛？
    2013年6月4日 14:01
    |