Fatal编程技术网
  • javascript/
  • Javascript 聚合物就绪函数只调用一次

Javascript 聚合物就绪函数只调用一次

javascript html html5-canvas polymer

Javascript 聚合物就绪函数只调用一次,javascript,html,html5-canvas,polymer,web-component,Javascript,Html,Html5 Canvas,Polymer,Web Component,我正在测试Polymer以开发一个我想在html中多次重用的组件（见下图）。我开发了以下元素： <link rel="import" href="bower_components/polymer/polymer.html"> <script src="js/fabric.js"></script> <dom-module id="tooth-element"> <template> <style>

我正在测试Polymer以开发一个我想在html中多次重用的组件（见下图）。我开发了以下元素：

<link rel="import" href="bower_components/polymer/polymer.html">
<script src="js/fabric.js"></script>

<dom-module id="tooth-element">
  <template>
    <style>
      #labelWrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 35px;
        font-weight: bold;
        height: 40PX;
      }
    </style>

    <div id="toothWrapper">
      <div id="upperRootWrapper">
        <canvas id="upperRoot" />
      </div>

      <div>
        <canvas id="tooth" />
      </div>

      <div id="lowerRootWrapper">
        <canvas id="lowerRoot" />
      </div>

      <div id="labelWrapper">
        <p>{{toothLabel}}</p>
      </div>
    </div>
  </template>

  <script>
  var TOOTH_SIZE = 50;
  var TOOTH_GAP = 5;

  var UPPERROOTID = 'upperRoot';
  var LOWERROOTID = 'lowerRoot';
  var TOOTHID = 'tooth';

  Polymer({
    is: "tooth-element",
    properties: {
      // declare the owner property
      showUpperRoot: {
        type: Boolean,
        value: true
      },
      showLowerRoot: {
        type: Boolean,
        value: true
      },
      toothLabel: {
        type: String,
        value: 30
      }
    },
    ready: function() {
      drawUpperRoot(this.showUpperRoot);
      drawTooth();
      drawLowerRoot(this.showLowerRoot);
      initLabel(this.toothLabel);
    }
  });

  function initLabel (label) {
    document.getElementById("labelWrapper").style.width = new String(3*TOOTH_SIZE)+'px';
  }

  function drawUpperRoot (isVisible) {
    var canvas = new fabric.Canvas(UPPERROOTID);
    if (isVisible) {
      canvas.setHeight(TOOTH_SIZE+TOOTH_GAP);
      canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP);
      canvas.renderAll();
      canvas.add(drawFace(1));
    } else {
      document.getElementById("upperRootWrapper").style.display = "none";
    }
  }

  function drawTooth () {
    var canvas = new fabric.Canvas(TOOTHID);
    canvas.setHeight(TOOTH_SIZE*3+TOOTH_GAP*2);
    canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP*2);
    canvas.renderAll();
    canvas.add(drawFace(2));
    canvas.add(drawFace(3));
    canvas.add(drawFace(4));
    canvas.add(drawFace(5));
    canvas.add(drawFace(6));
    //canvas.add(drawFace(7));
  }

  function drawLowerRoot (isVisible) {
    var canvas = new fabric.Canvas(LOWERROOTID);
    if (isVisible) {
      canvas.setHeight(TOOTH_SIZE+TOOTH_GAP*2);
      canvas.setWidth(TOOTH_SIZE*3+TOOTH_GAP*2);
      canvas.renderAll();
      canvas.add(drawFace(7));
    } else {
      document.getElementById("lowerRootWrapper").style.display = "none";;
    }
  }

  function drawFace(face) {
    var coordinates;
    switch (face) {
      case 1:
      coordinates = getFace1Coordinates();
      break;
      case 2:
      coordinates = getFace2Coordinates();
      break;
      case 3:
      coordinates = getFace3Coordinates();
      break;
      case 4:
      coordinates = getFace4Coordinates();
      break;
      case 5:
      coordinates = getFace5Coordinates();
      break
      case 6:
      coordinates = getFace6Coordinates();
      break;
      case 7:
      coordinates = getFace7Coordinates();
      break;
      default:
      coorddinates = null;
    }

    face = new fabric.Polygon(coordinates, {
      fill: '#E1E1E1',
      selectable: false,
      stroke: 'green'
    });
    face.on('mousedown', function () {
      if (face.fill == '#E1E1E1') {
        face.fill = '#878787';
      } else {
        face.fill = '#E1E1E1';
      }
    });
    return face;
  }

  function getFace1Coordinates() {
    return [{x: TOOTH_SIZE, y: 0}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: 0}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE}, {x: 0, y: TOOTH_SIZE}];
  }

  function getFace2Coordinates() {
    return [{x: 0, y: TOOTH_GAP}, {x: TOOTH_SIZE, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: 0, y: TOOTH_SIZE*3}];
  }

  function getFace3Coordinates() {
    return [{x: 0, y: 0}, {x: TOOTH_SIZE, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE}, {x: TOOTH_SIZE*3, y: 0}];
  }

  function getFace4Coordinates() {
    return [{x: TOOTH_SIZE*3+TOOTH_GAP, y: 0}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2+TOOTH_GAP, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE*3}];
  }

  function getFace5Coordinates() {
    return [{x: 0, y: TOOTH_SIZE*3+TOOTH_GAP}, {x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE*2+TOOTH_GAP}, {x: TOOTH_SIZE*3+TOOTH_GAP, y: TOOTH_SIZE*3+TOOTH_GAP}];
  }

  function getFace6Coordinates() {
    return [{x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE+TOOTH_GAP}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE*2}, {x: TOOTH_SIZE+TOOTH_GAP, y: TOOTH_SIZE*2}];
  }

  function getFace7Coordinates() {
    return [{x: 0, y: 0}, {x: TOOTH_SIZE, y: TOOTH_SIZE}, {x: TOOTH_SIZE*2, y: TOOTH_SIZE}, {x: TOOTH_SIZE*3, y: 0}];
  }
  </script>
</dom-module>


#唇形包装{
显示器：flex；
证明内容：中心；
对齐项目：居中；
字体大小：35px；
字体大小：粗体；
高度：40PX；
}
{{toothLabel}}

var齿_尺寸=50；
var齿隙=5；
var UPPERROOTID='upperRoot'；
var LOWERROOTID='lowerRoot'；
var TOOTHID=‘tooth’；
聚合物({
是：“牙齿元素”，
特性：{
//申报业主财产
showUpperRoot：{
类型：布尔型，
值：true
},
showLowerRoot：{
类型：布尔型，
值：true
},
牙签：{
类型：字符串，
价值：30
}
},
就绪：函数（）{
drawUpperRoot（this.showUpperRoot）；
牵引齿（）；
drawLowerRoot（this.showLowerRoot）；
initLabel（这是toothLabel）；
}
});
函数initLabel（标签）{
document.getElementById（“labelWrapper”）.style.width=新字符串（3*TOOTH_SIZE）+“px”；
}
函数drawUpperRoot（isVisible）{
var canvas=newfabric.canvas（UPPERROOTID）；
如果（可见）{
帆布。设置高度（齿尺寸+齿隙）；
帆布。设置宽度（齿形尺寸*3+齿形间隙）；
canvas.renderAll（）；
canvas.add（drawFace（1））；
}否则{
document.getElementById（“upperRootWrapper”）.style.display=“无”；
}
}
函数drawTooth（）{
var canvas=newfabric.canvas（TOOTHID）；
帆布。设置高度（齿形尺寸*3+齿形间隙*2）；
帆布。设置宽度（齿形尺寸*3+齿形间隙*2）；
canvas.renderAll（）；
canvas.add（drawFace（2））；
canvas.add（drawFace（3））；
canvas.add（drawFace（4））；
画布。添加（drawFace（5））；
画布。添加（drawFace（6））；
//画布添加（drawFace（7））；
}
函数drawLowerRoot（可见）{
var canvas=newfabric.canvas（LOWERROOTID）；
如果（可见）{
帆布。设置高度（齿形尺寸+齿形间隙*2）；
帆布。设置宽度（齿形尺寸*3+齿形间隙*2）；
canvas.renderAll（）；
画布添加（drawFace（7））；
}否则{
document.getElementById（“lowerRootWrapper”）.style.display=“无”；；
}
}
函数drawFace（面）{
var坐标；
开关（面）{
案例1：
坐标=getFace1Coordinates（）；
打破
案例2：
坐标=getFace2Coordinates（）；
打破
案例3：
坐标=getFace3Coordinates（）；
打破
案例4：
坐标=getFace4Coordinates（）；
打破
案例5：
坐标=getFace5Coordinates（）；
打破
案例6：
坐标=getFace6Coordinates（）；
打破
案例7：
坐标=getFace7Coordinates（）；
打破
违约：
coorddinates=null；
}
面=新织物。多边形（坐标{
填写：“#e1e1”，
可选：false，
笔划：“绿色”
});
face.on（'mousedown'，function（）{
如果（face.fill='#e1e1'）{
face.fill='#878787'；
}否则{
face.fill='#e1e1'；
}
});
返回面；
}
函数getFace1Coordinates（）{
返回[{x:TOOTH_SIZE，y:0}，{x:TOOTH_SIZE*2+TOOTH_GAP，y:0}，{x:TOOTH_SIZE*3+TOOTH_GAP，y:TOOTH_SIZE}，{x:0，y:TOOTH_SIZE}]；
}
函数getFace2Coordinates（）{
返回[{x:0，y:TOOTH_GAP}，{x:TOOTH_SIZE，y:TOOTH_SIZE+TOOTH_GAP}，{x:TOOTH_SIZE，y:TOOTH_SIZE*2+TOOTH_GAP}，{x:0，y:TOOTH_SIZE*3}]；
}
函数getFace3Coordinates（）{
返回[{x:0，y:0}，{x:TOOTH_SIZE，y:TOOTH_SIZE}，{x:TOOTH_SIZE*2，y:TOOTH_SIZE}，{x:TOOTH_SIZE*3，y:0}]；
}
函数getFace4Coordinates（）{
返回[{x:TOOTH_SIZE*3+牙缝，y:0}，{x:TOOTH_SIZE*2+牙缝，y:TOOTH_SIZE}，{x:TOOTH_SIZE*2+牙缝，y:TOOTH_SIZE*2+牙缝}，{x:TOOTH_SIZE*3+牙缝，y:TOOTH_SIZE*3}]；
}
函数getFace5Coordinates（）{
返回[{x:0，y:TOOTH_SIZE*3+TOOTH_GAP}，{x:TOOTH_SIZE+TOOTH_GAP，y:TOOTH_SIZE*2+TOOTH_GAP}，{x:TOOTH_SIZE*2+TOOTH_GAP}，{x:TOOTH_SIZE*3+TOOTH_GAP，y:TOOTH_SIZE*3+TOOTH_GAP}]；
}
函数getFace6Coordinates（）{
返回[{x:TOOTH_SIZE+TOOTH_GAP，y:TOOTH_SIZE+TOOTH_GAP}，{x:TOOTH_SIZE*2，y:TOOTH_SIZE+TOOTH_GAP}，{x:TOOTH_SIZE+TOOTH_GAP，y:TOOTH_SIZE*2}，{x:TOOTH_SIZE+TOOTH_GAP，y:TOOTH_SIZE*2}]；
}
函数getFace7Coordinates（）{
返回[{x:0，y:0}，{x:TOOTH_SIZE，y:TOOTH_SIZE}，{x:TOOTH_SIZE*2，y:TOOTH_SIZE}，{x:TOOTH_SIZE*3，y:0}]；
}
我正在尝试将其导入index.html文件，如下所示：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
        <link rel="import" href="tooth-element.html">
    </head>

    <body>
        <div id="line1">
            <tooth-element></tooth-element>
            <tooth-element></tooth-element>
        </div>
    </body>
</html>
当我在div行1中放置两个齿元素时，就会出现问题。第二个元素从未显示，因为从未为其调用ready函数。我不知道该怎么办才能解决这个问题。任何帮助都将不胜感激

我想在html中重复的组件布局如下所示（我得到的第一个牙齿元素的图像，但第二个牙齿元素没有）：

（解决方案）
我没有正确使用DOM（正如Neil John Ramal所解释的）。使用Glenn和Neil关于使用Poly.dom API的建议，我能够获得我想要的行为

请避免在处理本地dom时尽可能多地使用常规dom API（即
document.getElementById
，
document.querySelector
等）。改用
Polymer.dom
。请注意，当您将Polymer设置为使用shadowdom而不是shadydom时，您的代码可能会失败，因为常规DOM访问器无法穿透shadowdom（封装是其功能之一，shadydom尝试近似于此）

代码中的一个问题是，生成的元素非常紧凑 
function initLabel (label) {
  document.getElementById("labelWrapper").style.width = new String(3*TOOTH_SIZE)+'px';
}

document.querySelector('#labelWrapper') -> this.querySelector(#labelWrapper)

document.querySelector('#labelWrapper') -> Polymer.dom(this).querySelector('#labelWrapper')