Stiffler

Members
  • Content Count

    2
  • Joined

  • Last visited

  1. Hi, In my application in need to draw from 1 to 10 000 rectangles on stage. When I was using graphics I have no problem with rendering, but I had a problem with performance. I found out that if I would like to put more then 3000 objects on stage I should use sprites, and I did. However, I have a weird problem with rendering. Borders of spite not always appear. I recorded quick video what shows how it looks with spirits and then on video I switched to the old version of app where I was using "graphics". On the video, I am zooming in and out by mouse wheel what change the scale of stage and center stage to the cursor position. https://www.youtube.com/watch?v=TxzfKsvAGvs&feature=youtu.be Here how I create the model: function panelModel({ x, y, id, height, width, groupId, roofZone }): any { const { settings: { canvasCenter } } = state(); const texture = getTexture('panel', width, height, roofZone); const panel = new PIXI.Sprite(texture); panel.hitArea = new PIXI.Rectangle(0, 0, width, height); panel.id = id; panel.groupId = groupId; panel.interactive = true; panel.defaultCursor = 'crosshair'; panel.pivot.x = width / 2; panel.pivot.y = height / 2; panel.x = x + canvasCenter.x; panel.y = y + canvasCenter.y; panel.width = width; panel.height = height; return panel; } export function panelTexture(width: number, height: number, roofZone: number) { // const panelTexture = new PIXI.Graphics(); // panelTexture.beginFill(5872089); // panelTexture.drawRect(0, 0, width, height); // const outline = new PIXI.Graphics(); // outline.lineStyle(1, 0x00000); // outline.drawRect(0, 0, width - 0.5, height - 0.5); // panelTexture.addChild(outline); // panelTexture.endFill(); // return getRenderer().generateTexture(panelTexture); const base = PIXI.BaseTexture.fromImage(require('assets/media/textures/spriteTexture.png')); const texture = new PIXI.Texture(base); texture.noFrame = true; return texture; // return you the texture } Before I decided to use sprite I tried to use texture made from graphics. However, I didn't know how to make a correct outline so I ended up with the effect like this: My texture is just PNG image (1920 x 1080) with 20px border inside of it. So the question is how to render 10 0000 completely the same rectangles but in different positions. (width and height are not going to change) PS. Also, I forgot to mention that width and heigh in scale 1:1 is from 1px to 15px with some decimal points. I cannot change it because rectangles have to reflect the real world sizes on google static map Best regards Artur
  2. Hi, I'm new in Pixi, and I have a new job We are using pixi, unfortunately it is Pixi v3. I have small task to do and I'm doing pretty well with pixi so far, but I have to do something more complex. Basically I would like to create selecting area called (as I googled) rubber band. It is the same like you selecting couple of icons on windows desktop but on canvas. I was wondering how to do it. I think that the best it would be to create rectangle what resize on mouse move and calculate it by the mouse start and end coordination, it would be not so hard to achieve if user would try to select only from left to right, because that how we draw rectangles in pixi. Am I right? I don't have idea how to do it if user would select from right to left, how to draw this rectangle to looks like "selecting area". Or maybe I am totally wrong and there is easier solution? Anyway I would be appreciated of any help. Best regards Artur