Gelmiş geçmiş en büyük porno sitemiz olan 2pe de her zaman en kaliteli pornoları sunmayı hedefledik. Diğer video sitemiz olan vuam da ise hd porno ağırlıklı çalışmalara başladık.

Hybrid View

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    30
    Vote Rating
    0
    luoyu is on a distinguished road

      0  

    Default Unanswered: Ext.draw.Sprit to draw a horizontal line

    Unanswered: Ext.draw.Sprit to draw a horizontal line


    Hi
    I have a problem to draw a horizontal line use extjs 4。
    My code
    Code:
    //addCircle is function ,use to draw a circle,it work normally
    //the arguments panel ,you can regard as a window,and x,y is coordinate
    addCircle : function(panel,x,y){
            var circle = new Ext.draw.Component({
                width: 100,
                height: 100,
                x : x-200,
                y : y-10,
                draggable : true,
                resizable: {
                    dynamic: !Ext.isIE,
                    pinned: false,
                    preserveRatio : true,
                    handles: 'all'
                },
                items: [{
                    type: 'circle',
                    fill: '#79BB3F',
                    radius: 50,
                    x: 50,
                    y: 50
                }]
            });
            panel.add(circle);
        },
    //addLine is function ,use to draw a line,it work bad
    addLine : function(panel,x,y){
            var line = new Ext.draw.Component({
                width : 100,
                height : 100,
                x : x-200,
                y : y -10,
                draggable : true,
                resizable: {
                    dynamic: !Ext.isIE,
                    pinned: true,
                    preserveRatio : true,
                    handles: 'all'
                },
                items : [{
                    type: 'path',
                    stroke : 'blue',
                    fill:'darkblue',
                    'storke-width' : "4",
                    path : 'M 10 20 H 90 '
                }]
            });
            panel.add(line);
        }
    I want to draw a horizontal line.
    I use svg test ,you can use the url test
    http://www.w3schools.com/svg/tryit.asp?filename=trysvg_path
    and you can write the under code
    HTML Code:
    <!DOCTYPE html>
    <html>
    <body>
    
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    
    <path d="  M 10,20 H 90" stroke="blue" fill="darkblue" stroke-width="4" />
    </svg>
    
    </body>
    </html>
    then we can see a horizontal line
    图片1.jpg
    so , in my extjs code I use the path and write
    Code:
    path : 'M 10 20 H 90 '
    but it can not work.It has no js error,but has no line to display.
    图片2.jpg
    so , I use firebug to see the html ,
    图片3.jpg
    but,when i look the html,i think the code is same the above svg code.
    I don't know why it can not work.
    Thank you very much.

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Answers
    3
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    Your Move to command (M) is wrong, it requires a comma, like in your svg example.

    Try this path:

    Code:
    path : 'M 10,20 H 90 '

  3. #3
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Answers
    3
    Vote Rating
    6
    johanhaest is on a distinguished road

      0  

    Default


    You should also be aware that you're creating more than one canvas (surface) at the moment. And your giving one canvas only one Sprite. If you want the object to be in the same canvas you'll have to add sprites to one canvas.

    Code:
    // Create a draw component
    var drawComponent = Ext.create('Ext.draw.Component', {
        viewBox: false
    });
    
    
    // Create a window to place the draw component in
    Ext.create('Ext.Window', {
        width: 220,
        height: 230,
        layout: 'fit',
        items: [drawComponent]
    }).show();
    
    
    // Add a circle sprite
    var myCircle = drawComponent.surface.add({
        type: 'circle',
        x: 100,
        y: 100,
        radius: 100,
        fill: '#cc5'
    });
    
    
    // Now do stuff with the sprite, like changing its properties:
    myCircle.setAttributes({
        fill: '#ccc'
    }, true);
    
    
    // or animate an attribute on the sprite
    myCircle.animate({
        to: {
            fill: '#555'
        },
        duration: 2000
    });
    
    
    // Add a mouseup listener to the sprite
    myCircle.addListener('mouseup', function() {
        alert('mouse upped!');
    });
    More info: http://docs.sencha.com/ext-js/4-1/#!...g_and_charting

  4. #4
    Sencha User
    Join Date
    Mar 2010
    Posts
    30
    Vote Rating
    0
    luoyu is on a distinguished road

      0  

    Default


    I have to create multiple surface.I must can control every sprite.For example,If i put line,circle,into a surface,when i drag the surface,the line sprite and circle must be dragged together.At fact,I have anthoer method:
    Code:
    addRect : function(panel,x,y){
            var rect = new Ext.draw.Component({
                width : 100,
                height : 30,
                x : x-200,
                y : y -10,
                draggable : true,
                resizable: {
                    dynamic: !Ext.isIE,
                    pinned: true,
                    preserveRatio : false,
                    handles: 'w e',
                items : [{
                    type: 'rect',
                    fill: '#79BB3F',
                    x : 0,
                    y : 0,
                    width : 100,
                    height : 30
                }]
            });
            panel.add(rect);
    but the rect can display .
    So i think may be the line path is wrong?
    Thank you very much.

  5. #5
    Sencha User
    Join Date
    Mar 2011
    Posts
    114
    Answers
    3
    Vote Rating
    6
    johanhaest is on a distinguished road

      1  

    Default


    Here is a code example:
    Code:
    // Create a draw component
            var drawComponent = Ext.create('Ext.draw.Component', {
                viewBox: false
            });
    
    
            // Create a window to place the draw component in
            Ext.create('Ext.Window', {
                width: 220,
                height: 230,
                layout: 'fit',
                items: [drawComponent]
            }).show();
    
    
            
            //Create the line
            var myLine = drawComponent.surface.add({
                type: 'path',
                fill: 'none',
                stroke: '#000',
                'stroke-width': 2,
                path: 'M 10,30 H90'
            }).show(true); //show(true) for automatic (re)draw

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    Darshan25 is on a distinguished road

      0  

    Default


    same related question from my side as well.

    I want to draw horizontal line on chart (Parallel to x axis ), how we can achieve that???

    Please provide me you guidance.Its very urgent for me....

    Please fine below code and let me know where i am wrong..

    Thanks in advance.


    Ext.onReady(function () {



    var store = Ext.create('Ext.data.JsonStore', {
    fields: ['name', 'data'],
    data: [
    { 'name': 'metric one', 'data':10 },
    { 'name': 'metric two', 'data': 7 },
    { 'name': 'metric three', 'data': 5 },
    { 'name': 'metric four', 'data': 2 },
    { 'name': 'metric five', 'data':27 }
    ]
    });

    Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 300,
    animate: true,
    store: store,
    axes: [{
    type: 'Numeric',
    position: 'bottom',
    fields: ['data'],
    label: {
    renderer: Ext.util.Format.numberRenderer('0,0')
    },
    title: 'Sample Values',
    grid: true,
    minimum: 0
    }, {
    type: 'Category',
    position: 'left',
    fields: ['name'],
    title: 'Sample Metrics'
    }],
    series: [{
    type: 'bar',
    axis: 'bottom',
    highlight: true,
    xField: 'year',
    yField: ['comedy', 'action', 'drama', 'thriller'],
    gutter: 80,
    stacked: true,
    tips: {
    trackMouse: true,
    width: 140,
    height: 28,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
    }
    },
    label: {
    display: 'insideEnd',
    field: 'data',
    renderer: Ext.util.Format.numberRenderer('0'),
    orientation: 'horizontal',
    color: '#333',
    'text-anchor': 'middle'
    },
    xField: 'name',
    yField: 'data',
    'listeners' : {
    'itemmouseover' : function(event){
    Ext.MessageBox.alert('TESTING...');
    //event.series.chart.fireEvent('itemmousedown', event);
    var drawComponent = Ext.create('Ext.draw.Component', {
    renderTo: Ext.getBody(),
    viewBox: false,
    gradients: [{
    id: 'grad1',
    angle: 90,
    stops: {
    0: {
    color: 'black'
    },
    1: {
    color: '#c6d8ed'
    },
    99: {
    color: '#5f96db'
    },
    100: {
    color: '#6594cf'
    }
    }
    }],
    items: [{
    /*type: 'rect',
    fill: 'url(#grad1)',
    width: 700,
    height:5,
    x:0,
    y: 50,
    top:-20*/
    /*type: 'path',
    stroke : 'blue',
    fill:'darkblue',
    'storke-width' : "4",
    path : 'M 10 20 H 90 ',
    y:50*/
    type: 'path',
    fill: 'none',
    stroke: '#000',
    'stroke-width': 2,
    path: 'M 10,30 H90'
    }],


    }).show(true);
    }
    }
    },
    {
    type: 'line',
    highlight: {
    size: 7,
    radius: 7
    },
    axis: 'bottom',
    xField: 'name',
    yField: 'data',
    markerConfig: {
    type: 'cross',
    size: 4,
    radius: 4,
    'stroke-width': 0
    },
    label:{
    display: 'insideEnd',
    field: 'data',
    renderer: Ext.util.Format.numberRenderer('0'),
    orientation: 'horizontal',
    color: 'black',
    'text-anchor': 'middle'
    },tips: {
    trackMouse: true,
    width: 140,
    height: 28,
    renderer: function(storeItem, item) {
    this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
    }
    }


    }]
    });

    Ext.create('Ext.Button', {
    text: 'Used Baseline',
    renderTo: Ext.getBody(),
    handler: function() {
    alert('You clicked the button!');
    var drawComponent = Ext.create('Ext.draw.Component', {
    renderTo: Ext.chart.Chart(),
    viewBox: true,
    items: [{
    type: 'rect',
    fill: 'black',
    width: 700,
    height:5,
    x:10,
    y: 50
    }]
    });

    }
    });
    });

  7. #7
    Sencha User
    Join Date
    Mar 2010
    Posts
    30
    Vote Rating
    0
    luoyu is on a distinguished road

      0  

    Default


    Quote Originally Posted by johanhaest View Post
    Your Move to command (M) is wrong, it requires a comma, like in your svg example.

    Try this path:

    Code:
    path : 'M 10,20 H 90 '
    I has tried.But it also can not display.Thank you very much.