Adam Procter

Members
  • Content Count

    11
  • Joined

  • Last visited

Everything posted by Adam Procter

  1. Thanks I have ended up using an Object buttonMap { } like this var buttonMap = {} for (i = 0; i < Object.keys(this.myNodes).length; i++) { buttonMap[i] = new PIXI.Graphics() ...
  2. Thank you this is really helpful am getting close now , the chrome extension wouldnt work on my mac at all - annoyingly as I would love to use that. const array = [...Array(Object.keys(this.myNodes).length)].map( (k, kk) => { const button = new PIXI.Graphics() button.lineStyle(0) button.beginFill(0xcab6ff, 1) const txt = new PIXI.Text('name:' + kk) button.name = String(kk) for (j = 0; j < Object.keys(this.configPositions).length; j++) { button.drawCircle( this.configPositions[j].x_pos + this.configPositions[j].width, this.configPositions[j].y_pos + this.configPositions[j].height / 2, 15 ) // for (i = 0; i < Object.keys(this.myNodes).length; i++) { // if (this.configPositions[j].node_id == this.myNodes[i].node_id) { // // button.name = String(this.myNodes[i].node_id) // } // } } button.addChild(txt) button.endFill() return button } ) console.log(array) stage.addChild(...array) renders buttons in right places and the array shows all of the graphics named 1, 2,3 etc for length of this.myNodes which is great but cant quite yet get the dynamic name from the data yet it names them all the last node_id - however like you say my javascript skills are very very rusty / weak so am not fully understanding the ... Array yet - but hopefully I will soon
  3. This is the simplest version of what I am trying to do , this would draw 10 unique named and placed graphic circles. But it doesn't as you cant do buttons.[i] = new PIXI.Graphics() https://www.pixiplayground.com/#/edit/a6ztud7gXnRoAnMU6kiUv
  4. I cant seem to create a number of Graphic files dynamically it complains about buttons = new PIXI.Graphics() for (i = 0; i < Object.keys(this.myNodes).length; i++) { buttons[i] = []; var buttons[i] = new PIXI.Graphics() for (j = 0; j < Object.keys(this.configPositions).length; j++) { if (this.configPositions[j].node_id == this.myNodes[i].node_id) { buttons[i].name = this.myNodes[i].node_id //console.log(buttons.name) buttons[i].lineStyle(0) buttons[i].beginFill(0xcab6ff, 1) // x, y, radius buttons[i].drawCircle( this.configPositions[j].x_pos + this.configPositions[j].width, this.configPositions[j].y_pos + this.configPositions[j].height / 2, 15 ) buttons[i].endFill() // names it the last one only? } } }
  5. https://gitlab.adamprocter.co.uk/nn/nodenoggin/-/blob/fixConns/app/src/components/ConnectionsLayer.vue Might be easier if I shared all the code, linked above, really am a bit stumped on this one - thanks for looking
  6. Ah sorry should have shown that piece, im new to pixijs - so maybe I am doing it completely wrong So I am using one Graphics element ? and one ondragastart The buttons all appear in the right places - the name just doesnt seem to work in the same way? buttonsDraw() { var i var j var n = 1 var ref = this this.canvas = this.$refs.pixi const stage = this.PIXIApp.stage let buttons = new PIXI.Graphics()
  7. this code draw out a circle in each position no problem but when I use an interaction event to grab the name from each circle I only see to get the last one in the array and so although it is drawing each circle separately I cannot see that it is naming each one separately at all - what am I doing wrong ? Thanks for (i = 0; i < Object.keys(this.myNodes).length; i++) { for (j = 0; j < Object.keys(this.configPositions).length; j++) { if (this.configPositions[j].node_id == this.myNodes[i].node_id) { // THIS SHOULD NAME EACH Circle buttons.name = this.myNodes[i].node_id buttons.lineStyle(n++) buttons.beginFill(0xcab6ff, 1) buttons.drawCircle( this.configPositions[j].x_pos + this.configPositions[j].width, this.configPositions[j].y_pos + this.configPositions[j].height / 2, 15 ) buttons.endFill() } } } here is the code where I try to see the name of each button / circle buttons.interactive = true buttons.buttonMode = true buttons.on('pointerdown', onDragStart) function onDragStart(event) { this.dragging = true // returns last name everytime (no matter which button/circle I click on first) console.log(this.name) }
  8. This will draw me buttons for each of my nodes but when ever I click on the buttons and console.log (this.name) I only ever get the last node_id ? Which seems odd for (i = 0; i < Object.keys(this.myNodes).length; i++) { for (j = 0; j < Object.keys(this.configPositions).length; j++) { if (this.configPositions[j].node_id == this.myNodes[i].node_id) { buttons.name = this.myNodes[i].node_id buttons.lineStyle(0) buttons.beginFill(0xcab6ff, 1) // x, y, radius buttons.drawCircle( this.configPositions[j].x_pos + this.configPositions[j].width, this.configPositions[j].y_pos + this.configPositions[j].height / 2, 15 ) buttons.endFill() // names it the last one only? } }
  9. I believe I have used name = to assign a dynamic name to each of my icons. However I am unsure and wanted to inspect the DOM but I couldn’t see a way to do this. I found a chrome browser extension but I don’t really want to have to install chrome. Is there no way to inspect the pixi canvas built in?
  10. I am new to pixi and am just starting to integrate this in my vue project as a new layer but I am not calling it in the right place as the pixi stuff does not render. Does anyone know where I should call the PIXI stuff within the vue structure please. Here is my code so far <template> <div class="connections"> <canvas id="pixi"></canvas> </div> </template> <script> import { mapState } from 'vuex' import * as PIXI from 'pixi.js' export default { name: 'ConnectionsLayer', computed: mapState({ toolmode: (state) => state.ui.mode, }), methods: {}, } // I assume this should be called above maybe on mounted var canvas = document.getElementById('pixi') const app = new PIXI.Application({ width: window.innerWidth, height: window.innerHeight, antialias: true, transparent: true, view: canvas, }) let graphics = new PIXI.Graphics() graphics.x = app.renderer.width / 2 graphics.y = app.renderer.width / 2 app.stage.addChild(graphics) graphics.lineStyle(0) graphics.beginFill(0xde3249, 1) graphics.drawCircle(100, 250, 50) graphics.endFill() graphics.lineStyle(0) graphics.beginFill(0xde3249, 1) graphics.drawCircle(300, 250, 50) graphics.endFill() graphics.lineStyle(2, 0xffffff, 1) graphics.moveTo(100, 250) graphics.lineTo(300, 250) </script> any pointers would be much appreciated thanks