Ravindu89

Members
  • Content count

    9
  • Joined

  • Last visited

  1. How to bind mouse click action on drawn line

    yes as you mentioned the previous post I have set this polygon as line graphics object hit area. But the bottom area of chart (outside of polygon area) is also listening to action.
  2. How to bind mouse click action on drawn line

    Thank you all for this lot of advice. I have used Ivan posted method and but still down part of the line chart is sensitive to mouse action. Attached figures are shown my implementation. (I have colored hit area polygon' outline to easy read) Hit Area polygon point array I need only outlined polygon area is sensitive to mouse action. Please support me.
  3. How to bind mouse click action on drawn line

    Thank you all for quick replies. Hi PsichiX, I have to achieve two goals, When clicking on a particular line, Double left click - open property window of that line (Need to pass some unique id with that action to identify that line) Single Right click - remove the added line (Need to pass some unique id with that action to identify that line) When hovering on a particular line, Value tooltip should be popped up. Examples how the chart looks on in that above status are shown in below.
  4. Is there a way to bind mouse action on PIXI.Graphics line?. I have used below codes to bind action on the line. But the action is bound on all chart area I think, hitArea is not correctly set. this.strategyGraphic.interactive = true; this.strategyGraphic.hitArea = this.strategyGraphic.getBounds(); this.strategyGraphic.click = function (data) { alert('hit rect'); } Would like to hear any advice on the subject. Thanks in advance!
  5. PIXI Graphics are not sharp

    Thank you for your quick reply, I instantiate Graphics constructor like below, new PIXI.Graphics(true); Yes, I am working with half-integers. but I didn't get what you mean in above that 1-pixel line will be blurry. Could you explain more about this topic?
  6. I am building a stock chart on PIXI.js. To display different chart styles on chart, I am using PIXI.graphics' drawRect, drawPolygon, lineTo functions. Graphics, Edges, grid lines, text are not sharp in this chart. I would like to say that I've tried several workarounds from the web to make this chart sharp. But those didn't help me. Examples how the chart looks on in candle and area chart styles and renderer parameters are shown in below. const renderer = PIXI.autoDetectRenderer(canvas.width, canvas.height, {view: canvas, antialias: true, transparent: false, resolution: 1}); renderer.view.style.position = 'relative'; renderer.view.style.display = 'block'; renderer.autoResize = true; renderer.backgroundColor = 0xFFFFFF; Area Chart Style Candle Chart Style Would like to hear any advice on the subject. Thanks in advance!
  7. Thank you very much. after changing to native line mode it's working fine. And I have another question, I'm going to evolve this basic chart to advance speedy data-loading chart. That's why I've chosen WebGL based pixi.js to build my charting framework. Therefore could I know the charting performance can be impacted by this change as I am a newbie for this PIXI framework. It's great pleasure if you can give a descriptive answer.
  8. I'm building line chart using the pixi.js lineTo method. The problem is the lines are shrinking when a distance between points becomes smaller. For testing purpose, I'm trying to draw 200,000 points on that chart. Drawing function: var dataSet = ohlcStore[chartProperty.sym]; if (dataSet && dataSet.length > 0) { var plot = new PIXI.Graphics(); plot.setTransform(columnSize, (renderer.view.height - rowSize) + (Val_min * yScale), 1, -1 * yScale); plot.lineStyle(0.6, chartProperty.lineColor, 1); plot.moveTo(0, dataSet[0].close); for (i = 1; i < dataSet.length; i++) { try { plot.lineTo(i * xScale, dataSet[i].close); } catch (x) { console.error("Error - " + x); } } plot.endFill(); context.addChild(plot); } Result drawing is attached along with this. In this case, xScale is 0.006475032375161876 and Using the canvas render gives correct results. Trying to search for the problem, I've found that the Pixi.js may have an issue with non-integer values. Therefore I've rounded values to integer but the problem didn't solve. Please support to fix this problem.