• Content Count

  • Joined

  • Last visited

  1. Thanks for all the help, it's working pretty well now! Still some details could be fleshed out, but the major graphics issue is gone and that's the most important thing.
  2. Oh yeah that's a good idea, just use some CSS magic, why haven't I thought of that. What about exporting to data URL? Some people would love to have the whole image opened in another window so they can do whatever zooming in or panning they want with it (especially useful for mobile users), but with fragmented view I can only export a part of the chart now. I can just remove that feature and do fullscreen instead but I feel it's too good to let go.
  3. Ahh, I tried limiting my canvas width and it looks clean now, so that's the issue then. What would the best solution be to implement such a scrollable view of this long image? I initially decided to do it this way (rather than a fixed canvas and implement scrolling myself) because a native scrollbar is much better for desktop user, and it also allows directly exporting the full image into data URL.
  4. A demo as in source or? https://bestdoribeta.animepie.to/tool/chart/92/expert/B-O-F It looks alright on 100% zoom, as you go up the tearing gets worse and worse.
  5. Hello, I'm drawing a simple scene using Pixi.js The issue right now is that it looks all amazing on desktop, however it looks horrendously bad on mobile (I'm using iOS Safari 9) In particular, the grids have missing vertical lines, texts are badly teared, and the whole thing looks blurry in general. Any idea why that is happening? this.app = new this.PIXI.Application({ view: this.$refs.canvas, antialias: true, backgroundColor: 0x000000, preserveDrawingBuffer: true, autoDensity: true, resolution: window.devicePixelRatio }) //... this.graphicsLane = new this.PIXI.Graphics() this.layerLane = new this.PIXI.Container() this.layerLane.addChild(this.graphicsLane) this.app.stage.addChild(this.layerLane) //... this.graphicsLane.lineStyle( lineWidth, lineMidColor, lineMidAlpha[0] ) for (j = 0; j < 6; j++) { x = i * this.panelWidth + (j + 4) * this.noteWidth y = this.height this.graphicsLane.moveTo(x, 0) this.graphicsLane.lineTo(x, y) } //... var addText = (string, fill, fontSize, anchorX, x, y) => { var text = new this.PIXI.Text(string, { fill, fontSize }) this.layerLine.addChild(text) text.position.set(x, y) text.anchor.x = anchorX text.anchor.y = y + fontSize / 2 > this.height ? 1 : 0.5 this.spriteTexts.push(text) } addText( this.$options.filters.time(time, true), '0x808080', fontSize, 1, pos.x + 2.5 * this.noteWidth, pos.y )