Jump to content

Adam Procter

  • Content Count

  • Joined

  • Last visited

About Adam Procter

  • Rank

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  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
  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, r
  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
  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.c
  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) =>
  • Create New...