line renderer画出的线在scene面板能看到game面板看不到,被ngui的图片遮挡显示不出来

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了line renderer画出的线在scene面板能看到game面板看不到,被ngui的图片遮挡显示不出来相关的知识,希望对你有一定的参考价值。

unity2017.1.3f1版本

参考技术A 将UI调成摄像机模式的! 参考技术B 手机坏了

为什么我的cairo画出的直线不同角度宽度不同???

一、为什么我的cairo画出的直线不同角度宽度不同???

       前一段时间研究通感一体化,需要使用Cairo绘制波形图,设置了统一的线宽,但是绘制出的图形线段的宽度却不一样,原始code如下:

/****************************************************/
/***********  gtk_line_chart_custom.c   *************/

/* 定义 Properties */
enum {
    PROP_0,
    PROP_AXIS_X_RANGE, // X轴的范围
    PROP_AXIS_Y_RANGE, // Y轴的范围
    PROP_ORIGINAL_X,   // 原点X的坐标
    PROP_ORIGINAL_Y,   // 原点Y的坐标
    PROP_MAX
    };
    
static GParamSpec *line_chart_props[PROP_MAX]={NULL};

// 客制化控件,用于绘制折线图
#define GTK_TYPE_LINE_CHART (gtk_line_chart_get_type ())
G_DECLARE_FINAL_TYPE (GtkLineChart, gtk_line_chart, GTK, LINE_CHART, GObject)

struct _GtkLineChart{
    GObject parent_instance;
};

typedef struct {
    /*坐标轴范围,及原点坐标*/
    double axis_x_range;
    double axis_y_range;
    double original_x;
    double original_y;
}GtkLineChartPrivate;

/***************************** 实现GdkPaintable 接口***********************/
void
gtk_line_chart_snapshot (GdkPaintable *paintable,
                         GdkSnapshot  *snapshot,
                         double        width,
                         double        height)
{
    cairo_t *cr;
    GtkLineChart *lineChart = GTK_LINE_CHART(paintable);
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);

    gtk_snapshot_append_color (snapshot,
            &priv->bg_color,
            &GRAPHENE_RECT_INIT (0, 0, width, height));
    
    cr = gtk_snapshot_append_cairo (snapshot,
            &GRAPHENE_RECT_INIT (0,0,width, height));
    
   	// 变换CTM将坐标轴缩放在 
   	// X:0 ~ priv->axis_x_range
   	// Y:0 ~ priv->axis_y_range
    cairo_scale(cr,width/priv->axis_x_range,height/priv->axis_y_range);

	// 变换CTM ,将坐标的原点移动到(priv->original_x,priv->original_y)
    cairo_translate(cr,priv->original_x,priv->original_y);
    
    //设置线宽
    cairo_set_line_width(cr,80);
    
    // 水平绘制一条直线
    cairo_move_to(cr,-priv->original_x,0.);
    cairo_line_to(cr,priv->axis_x_range-priv->original_x,0.);
    cairo_stroke(cr);
    
    // 对角线绘制一条直线
    cairo_move_to(cr,-priv->original_x,priv->axis_y_range-priv->original_y);
    cairo_line_to(cr,priv->axis_x_range-priv->original_x,-priv->original_y);
    cairo_stroke(cr);

  
    cairo_destroy (cr);
}

static GdkPaintable *
gtk_line_chart_rt_get_current_image (GdkPaintable *paintable)
{
    GtkLineChart *lineChart = GTK_LINE_CHART(paintable);
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);

    return gtk_line_chart_new (priv->axis_x_range,priv->axis_y_range);
}

static void
gtk_line_chart_paintable_init (GdkPaintableInterface *iface)
{
    iface->snapshot = gtk_line_chart_snapshot;
    iface->get_current_image = gtk_line_chart_rt_get_current_image;
}
/***************************** 实现客制化控件***********************/
G_DEFINE_TYPE_WITH_CODE (GtkLineChart , gtk_line_chart, G_TYPE_OBJECT,
        {G_IMPLEMENT_INTERFACE (GDK_TYPE_PAINTABLE,gtk_line_chart_paintable_init)
        G_ADD_PRIVATE (GtkLineChart)})

static void
gtk_line_chart_set_property (GObject         *object,
                             guint            prop_id,
                             const GValue    *value,
                             GParamSpec      *pspec)
{
    GtkLineChart *lineChart = GTK_LINE_CHART(object);
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);
    
    switch (prop_id){
        case PROP_AXIS_X_RANGE:
            priv->axis_x_range = g_value_get_double(value);
            break;
        case PROP_AXIS_Y_RANGE:
            priv->axis_y_range = g_value_get_double(value);
            break;
        case PROP_ORIGINAL_X:
            priv->original_x = g_value_get_double(value);
            g_return_if_fail(priv->original_x <= priv->axis_x_range);
            break;
        case PROP_ORIGINAL_Y:
            priv->original_y = g_value_get_double(value);
            g_return_if_fail(priv->original_y <= priv->axis_y_range);
            break;
        default:
            G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
            break;
    }
    gdk_paintable_invalidate_contents(GDK_PAINTABLE(lineChart));
}

static void
gtk_line_chart_get_property (GObject         *object,
                             guint            prop_id,
                             GValue          *value,
                             GParamSpec      *pspec)
{
    GtkLineChart *lineChart = GTK_LINE_CHART(object);
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);
    
    switch (prop_id){
        case PROP_AXIS_X_RANGE:
            g_value_set_double (value, priv->axis_x_range);
            break;
        case PROP_AXIS_Y_RANGE:
            g_value_set_double (value, priv->axis_y_range);
            break;
        case PROP_ORIGINAL_X:
            g_value_set_double (value, priv->original_x);
           break;
        case PROP_ORIGINAL_Y:
            g_value_set_double (value, priv->original_y);
            break;
        default:
            G_OBJECT_WARN_INVALID_PROPERTY_ID (object, prop_id, pspec);
            break;
    }
}

static void
gtk_line_chart_class_init (GtkLineChartClass *klass)
{
    GObjectClass *gobject_class = G_OBJECT_CLASS (klass);

    gobject_class->finalize = gtk_line_chart_finalize;
    gobject_class->set_property = gtk_line_chart_set_property;
    gobject_class->get_property = gtk_line_chart_get_property;
    
    line_chart_props[PROP_AXIS_X_RANGE] =
            g_param_spec_double("x-range",
                    "Axis X range value",
                    "Axis X range value",
                    0,
                    G_MAXDOUBLE,
                    1,
                    G_PARAM_READWRITE);
    
    line_chart_props[PROP_AXIS_Y_RANGE] =
            g_param_spec_double("y-range",
                    "Axis Y range value",
                    "Axis Y range value",
                    0,
                    G_MAXDOUBLE,
                    1,
                    G_PARAM_READWRITE);
    
    line_chart_props[PROP_ORIGINAL_X] =
            g_param_spec_double("original-x",
                    "original-x",
                    "original-x",
                    0,
                    G_MAXDOUBLE,
                    0,
                    G_PARAM_READWRITE);
    
    line_chart_props[PROP_ORIGINAL_Y] =
            g_param_spec_double("original-y",
                    "original-y",
                    "original-y",
                    0,
                    G_MAXDOUBLE,
                    0,
                    G_PARAM_READWRITE); 
  
    g_object_class_install_properties(gobject_class,PROP_MAX,line_chart_props);
}

static void
gtk_line_chart_init (GtkLineChart *lineChart)
{
   GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);

   priv->original_x = 0.;
   priv->original_y = 0.;
}

GdkPaintable *
gtk_line_chart_new (double axis_x_range,double axis_y_range)
{
    GtkLineChart *lineChart;

    lineChart = g_object_new (GTK_TYPE_LINE_CHART,
            "x-range",axis_x_range,
            "y-range",axis_y_range,
            NULL);

    return GDK_PAINTABLE (lineChart);
}

绘制效果如下图:

大家肯定会发现设置一样宽度的直线线宽(cairo_set_line_width(cr,80);)但是为什么绘制的直线宽度却不一样???


二、再看Cairo官方API介绍

cairo_set_line_width ()

Sets the current line width within the cairo context. The line width value specifies the diameter of a pen that is circular in user space, (though device-space pen may be an ellipse in general due to scaling/shear/rotation of the CTM).

在cairo上下文中设置当前的线宽度。线宽值指定用户空间圆形笔的直径(尽管由于CTM的缩放/剪切/旋转设备空间笔通常可能是椭圆形)。

       那问题很清晰了,主要是因为我们对于CTM的变换,导致设备空间的画笔变成了椭圆形,从而导致不同角度绘制的直线宽度不一致的问题。


三、修改code实现不修改CTM情况下的坐标变换

       我们这里不使用Cairo提供的CTM变换函数,实现逻辑坐标系到物理坐标系的映射过程,例如如下图:

蓝色部分是我们Gtk应用的窗口,我们绘图的时候Cairo都会将用户空间的坐标转换成设备空间的坐标,默认情况下(不修改CTM)设备空间和用户空间的画笔都是圆形,所以我们这边自定义一个函数,实现用户自定义的坐标空间到应用窗口空间坐标的变换,函数实现如下图:

/* 用户自定义的坐标空间到应用窗口空间坐标的变换函数 */
static void
gtk_line_chart_user_to_device(GtkLineChart *lineChart,
                              double width,double height,
                              double user_x,double user_y,
                              double *device_x , double *device_y)
{
    g_return_if_fail(device_x != NULL);
    g_return_if_fail(device_y != NULL);
    
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);
    
    double x_step = width/priv->axis_x_range;
    double y_step = height/priv->axis_y_range;
 
    *device_x = (priv->original_x+user_x)*x_step;
    *device_y = (priv->original_y-user_y)*y_step;
}

/* 应用窗口空间坐标到用户自定义的坐标空间的变换函数 */
static void
gtk_line_chart_device_to_user(GtkLineChart *lineChart,
                              double width,double height,
                              double device_x,double device_y,
                              double *user_x , double *user_y)
{
    g_return_if_fail(user_x != NULL);
    g_return_if_fail(user_y != NULL);
    
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);
    
    double x_step = priv->axis_x_range/width;
    double y_step = priv->axis_y_range/height;
    
    *user_x = (device_x*x_step)-priv->original_x;
    *user_y = priv->original_y-(device_y*y_step);
}

修改上述code,实现不同角度下画出的线条长度都一致,

......

void
gtk_line_chart_snapshot (GdkPaintable *paintable,
                         GdkSnapshot  *snapshot,
                         double        width,
                         double        height)
{
	cairo_t *cr;
    double device_x=0.;
    double device_y=0.;
    double user_x=0.;
    double user_y=0.;
    GtkLineChart *lineChart = GTK_LINE_CHART(paintable);
    GtkLineChartPrivate *priv = gtk_line_chart_get_instance_private(lineChart);

    gtk_snapshot_append_color (snapshot,
            &priv->bg_color,
            &GRAPHENE_RECT_INIT (0, 0, width, height));
    
    cr = gtk_snapshot_append_cairo (snapshot,
            &GRAPHENE_RECT_INIT (0,0,width, height));
    
    
    cairo_set_line_width(cr,20);
   
    gtk_line_chart_user_to_device(lineChart, width, height,
            -priv->original_x,
            0.,
            &device_x , &device_y);
    cairo_move_to(cr,device_x,device_y);
    
    gtk_line_chart_user_to_device(lineChart, width, height,
            priv->axis_x_range-priv->original_x,
            0.,
            &device_x , &device_y);
    cairo_line_to(cr,device_x,device_y);
    cairo_stroke(cr);

    gtk_line_chart_user_to_device(lineChart, width, height,
            -priv->original_x,
            priv->original_y-priv->axis_y_range,
            &device_x , &device_y);
    cairo_move_to(cr,device_x,device_y);
    
    gtk_line_chart_user_to_device(lineChart, width, height,
            priv->axis_x_range-priv->original_x,priv->original_y,&device_x , &device_y);
    cairo_line_to(cr,device_x,device_y);
    cairo_stroke(cr);

	cairo_destroy (cr);
}
......

效果图如下(没有对锯齿进行优化):


以上是关于line renderer画出的线在scene面板能看到game面板看不到,被ngui的图片遮挡显示不出来的主要内容,如果未能解决你的问题,请参考以下文章

CSS <hr>标记 画出的线 居左 怎么实现?

急!!!matlab中怎么把画出的线显示在网格上?

标题前后的线在图像上[重复]

标题前后的线在图像上[重复]

如何使用倾斜的线在openCV中获取矩阵(ROI)

为什么我的cairo画出的直线不同角度宽度不同???