Bonne façon de mapper les éléments HTML en forme de réponse en réponse à un jeu de plateau

Question

Mon problème est que je n'ai pas trouvé comment aligner les espaces en réponse. J'ai essayé d'utiliser vw/vh et% s, mais tous les deux cassent la cohérence sur différentes tailles de vue. Quelqu'un peut-il recommander une façon simple de verrouiller cette carte?

Je ne voulais pas utiliser plusieurs canevas bc du drain cpu de plus de 50 espaces et je ne veux pas utiliser une carte image parce que ce n'est pas réactif.

Salut les gars et les filles,

Je suis en train de transférer un jeu de plateau en HTML via 1.x angulaire J'ai un objet avec chaque espace de tableau, et ai donné à chaque espace une origine de localisation via le positionnement absolu (haut, gauche) et fait une fonction rapide qui prend toutes les propriétés dans une propriété transform et retourne une chaîne pour la transformation css dans ng-style .

Voici un exemple des premiers espaces:

1: {color: colors.blue, origin:{top:'65%', left:'13%'}, tForm: {rotate:'-21deg'}}, 
2: {color: colors.yellow, origin:{top:'66.5%', left:'8.5%'}, tForm: {rotate:'-35deg'}}, 
3: {color: colors.black, origin:{top:'70%', left:'6%'}, tForm: {rotate:'-72deg'}}, 
4: {color: colors.red, origin:{top:'75%', left:'5.5%'}, tForm: {rotate:'0deg'}}, 
5: {color: 'cool?', origin:{top:'80%', left:'6%'}, tForm: {rotate:'-21deg'}} 

Voici le code qui est le traitement de ces propriétés (la plupart du temps en ng de style):

<span id="space-{{space}}" ng-repeat="space in section" ng-init="bgColor = cool.di.models.spaces[space].color === 'trap' ? '#900020' : cool.di.models.spaces[space].color === 'cool?' ? 'rgba(230,232,234, 1)': cool.di.models.spaces[space].color === 'pass' ? 'green' : cool.di.models.spaces[space].color" 
ng-style="{padding:'.1em', color:'mintcream', background:bgColor, border:'1px solid rgba(0,0,0,.2)', position:'absolute', top: cool.di.models.spaces[space].origin.top, left: cool.di.models.spaces[space].origin.left, transform: cool.di.api.tForm(cool.di.models.spaces[space].tForm), height:'2em', width:'2em'}"> 

Voici mon progrès en cours sur le « C "https://irthos.github.io/cool/#/board

Merci pour vos suggestions!

Answer 1

Ce qui a fonctionné assez simplement pour rendre la collection complexe de formes était un élément SVG répété avec sous-élément polygone.

Le html:

<svg ng-style="{position:'absolute', background:'none', overflow: 'visible'}"> 
    <polygon points="{{points || '0,0 0,10 10,10 10,0 0,0'}}" stroke="black" fill="{{bgColor}}"></polygon> 
</svg> 

Lorsque les points est une chaîne générée à partir d'une fonction d'assistance pour normaliser les dimensions de vue:

function(points){ 
    var pointsStr = ''; 
    points ? 
    angular.forEach(points.split(' '), function (point) { 
     var x = point.split(',')[0], 
      y = point.split(',')[1]; 
     var hPx = Math.floor(($window.innerWidth/100) * x), 
      vPx = Math.floor(($window.innerHeight/100) * y); 
       pointsStr += hPx +','+vPx+' '; 
      }) : null; 
     return pointsStr.length > 0 ? pointsStr : null; 
} 

qui analyse la chaîne de propriété 'poly' dans un objet usine:

1: {color: colors.blue, poly:'13,5 8,5 10,11 12,11 13,5'}, 
2: {color: colors.yellow, poly:'8,5 4,8 7,13 10,11 8,5'}, 
3: {color: colors.black, poly:'4,8 1.8,13 5.5,16 7,13 4,8'}, 
4: {color: colors.red, poly:'1.8,13 0,19 5,19 5.5,16 1.8,13'}, 
5: {color: 'cool?', poly:'0,19 1,26 5.3,22.5 5,19 0,19'}, 
6: {color: colors.blue, poly: '1,26 3.5,31, 7,25 5.3,22.5 1,26'}, 
7: {color: colors.yellow, poly: '3.5,31 9,33 10,26 7,25 3.5,31'}, 
8: {color: colors.black, poly: '9,33 13,32 12,25.5 10,26 9,33'}, 
9: {color: 'cool?', poly:'13,32 18,28 15,24 12,25.5 13,32'} 

rendu pension complète: https://irthos.github.io/cool/#/board