问:
How do I get rid of the extra padding on these images?
I have been trying to make a small game, where I ran into a error.

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
      </div>
      <div id="colorpicker">
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html></code>```

As you can see above, the images still have padding, even though I set their margin and padding to 0. (I just realized that the images don't load as they are local. It is just a 32x32 image of white.)

答:
Quick trick

set a font-size:0 on the board

```<code>#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0
}
</code>```

Snippet

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
      </div>
      <div id="colorpicker">
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html></code>```

Body:
I have been trying to make a small game, where I ran into a error.

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
}

    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">

      Drawify

As you can see above, the images still have padding, even though I set their margin and padding to 0. (I just realized that the images don't load as they are local. It is just a 32x32 image of white.)

Body:
Quick trick

set a font-size:0 on the board

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0
}

Snippet

body{
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

#title{
  text-align: center;
  font-size: 96px;
  margin-bottom: 5px;
}

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
}

#board{
  background-color: black;
  padding: 3px;
  width: 512px;
  height: 512px;
  font-size:0;
}

<html>
  <head>
    <title>
      Drawify | 0.0.1
    </title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <link href="https://fonts.googleapis.com/css?family=Raleway:700" rel="stylesheet">
  </head>
  <body>
    <h1 id="title">
      Drawify
    </h1>
    <div id="container">
      <div id="board">
        <div class="line">
          <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
            <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
  <img class="boardpic" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSzQljZiYwAlULvViQAWNnBaIz4r_61X09p2lcgZCTVrEBN4Rot" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
        <div class="line">
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
          <img class="boardpic" src="images/white.png" />
        </div>
      </div>
      <div id="colorpicker">
      </div>
    </div>
    <script src="code.js">
    </script>
  </body>
</html>


来源: stackexchange

问:
How to use paintComponent in Java to paint multiple things, but rotate one?
I'm making a program in Java for my CS class. My teacher has little experience with graphics programing in Java so I've turned to you. I'm currently using the paintComponent method of my main panel to draw two things, one, a rectangle (my cannon, possibly replaced with a image later), and two, a .png file of a cannon ball. I use the Graphics g (which I convert to Graphics2D) to paint the cannon and Ball on to the screen. I then rotate, but, the cannon and ball rotate, not just the cannon. Any tips, suggestions, or helpful tutorials are greatly appreciated.

Here is my code (the commented out links are where I got certain code, ignore them):

```<code>    package Cannon;

import java.awt.geom.Point2D;
import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

public class NewMain{

public static void main(String[] args) {
FraMainWindow frame = new FraMainWindow();
}
}

class FraMainWindow extends JFrame {
DrawCannon pnlCannon = new DrawCannon();
ButtonPannel pnlButtons = new ButtonPannel();
public FraMainWindow() {
this.setDefaultCloseOperation(JFrame.EXI…
this.setTitle("Super Mario Cannon Bro's");
this.setSize(900, 550);
this.setLayout(new BorderLayout());
this.add(pnlCannon, BorderLayout.CENTER);
this.add(pnlButtons, BorderLayout.SOUTH);
MouseMovement mouseMove = new MouseMovement();
MouseAction mouseClick = new MouseAction();
pnlCannon.addMouseMotionListener(mouseMo…
pnlCannon.addMouseListener(mouseClick);
FireButton actnFire = new FireButton();
pnlButtons.btnFire.addActionListener(act…
this.setVisible(true);
}

public class DrawCannon extends JPanel{
Rectangle.Float rectCannon = new Rectangle.Float(30, 450, 50, 10);
Image imgBall=new ImageIcon("ball.png").getImage();
double dAngle = 0;
boolean isFired = false;
public void addCannonBall(){
isFired=true;
repaint();
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_… RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_… RenderingHints.VALUE_RENDER_QUALITY);//A… Aliasing from http://www.java2s.com/Code/Java/2D-Graph…
g2d.rotate(0 - dAngle, rectCannon.getX(), rectCannon.getY() + 5);
g2d.fill(rectCannon);
if(isFired){
g2d.drawImage(imgBall, 0, 0, null);
}
//Dimension size = getSize();
}
}

public class ButtonPannel extends JPanel {
JButton btnFire = new JButton("Fire!");
ButtonPannel() {
this.add(btnFire);
}
}

public class FireButton implements ActionListener {
public void actionPerformed(ActionEvent e) {
pnlCannon.addCannonBall();
System.out.println("Fire ZE MISSILES");
}
}
public class MouseMovement implements MouseMotionListener {

public void mouseDragged(MouseEvent e) {
double dBase, dHeight, dAngle;
dBase = e.getX() - pnlCannon.rectCannon.getX();
dHeight = pnlCannon.rectCannon.getY() - 5 - e.getY() + 10;
dAngle = Math.atan2(dHeight, dBase);
pnlCannon.dAngle = dAngle;
pnlCannon.repaint();
}//http://download.oracle.com/javase/tutori…

public void mouseMoved(MouseEvent e) {
}
}

public class MouseAction implements MouseListener {

public void mousePressed(MouseEvent e) {
double dBase, dHeight, dAngle;
dBase = e.getX() - pnlCannon.rectCannon.getX();
dHeight = pnlCannon.rectCannon.getY() - 5 - e.getY() + 10;
dAngle = Math.atan2(dHeight, dBase);
pnlCannon.dAngle = dAngle;
pnlCannon.repaint();
}

public void mouseReleased(MouseEvent e) {
}

public void mouseEntered(MouseEvent e) {
}

public void mouseExited(MouseEvent e) {
}

public void mouseClicked(MouseEvent e) {
} // From http://www.rgagnon
</code>```

答:
Try moving this bit:

```<code>if(isFired){
g2d.drawImage(imgBall, 0, 0, null);
}
</code>```

before this line:

```<code>g2d.rotate(0 - dAngle, rectCannon.getX(), rectCannon.getY() + 5);
</code>```

Any transformations you apply to your Graphics2D will affect anything from that point, so you have to either be careful to apply transforms when you need them, or to "un-apply" them before you don't need them.

ContentLicense: CC BY-SA 2.5

Body:
I'm making a program in Java for my CS class. My teacher has little experience with graphics programing in Java so I've turned to you. I'm currently using the paintComponent method of my main panel to draw two things, one, a rectangle (my cannon, possibly replaced with a image later), and two, a .png file of a cannon ball. I use the Graphics g (which I convert to Graphics2D) to paint the cannon and Ball on to the screen. I then rotate, but, the cannon and ball rotate, not just the cannon. Any tips, suggestions, or helpful tutorials are greatly appreciated.

Here is my code (the commented out links are where I got certain code, ignore them):

    package Cannon;

import java.awt.geom.Point2D;
import java.awt.BorderLayout;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseListener;
import java.awt.event.MouseMotionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.Timer;

public class NewMain{

public static void main(String[] args) {
FraMainWindow frame = new FraMainWindow();
}
}

class FraMainWindow extends JFrame {
DrawCannon pnlCannon = new DrawCannon();
ButtonPannel pnlButtons = new ButtonPannel();
public FraMainWindow() {
this.setDefaultCloseOperation(JFrame.EXI…
this.setTitle("Super Mario Cannon Bro's");
this.setSize(900, 550);
this.setLayout(new BorderLayout());
this.add(pnlCannon, BorderLayout.CENTER);
this.add(pnlButtons, BorderLayout.SOUTH);
MouseMovement mouseMove = new MouseMovement();
MouseAction mouseClick = new MouseAction();
pnlCannon.addMouseMotionListener(mouseMo…
pnlCannon.addMouseListener(mouseClick);
FireButton actnFire = new FireButton();
pnlButtons.btnFire.addActionListener(act…
this.setVisible(true);
}

public class DrawCannon extends JPanel{
Rectangle.Float rectCannon = new Rectangle.Float(30, 450, 50, 10);
Image imgBall=new ImageIcon("ball.png").getImage();
double dAngle = 0;
boolean isFired = false;
public void addCannonBall(){
isFired=true;
repaint();
}
public void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2d = (Graphics2D) g;
g2d.setRenderingHint(RenderingHints.KEY_… RenderingHints.VALUE_ANTIALIAS_ON);
g2d.setRenderingHint(RenderingHints.KEY_… RenderingHints.VALUE_RENDER_QUALITY);//A… Aliasing from http://www.java2s.com/Code/Java/2D-Graph…
g2d.rotate(0 - dAngle, rectCannon.getX(), rectCannon.getY() + 5);
g2d.fill(rectCannon);
if(isFired){
g2d.drawImage(imgBall, 0, 0, null);
}
//Dimension size = getSize();
}
}

public class ButtonPannel extends JPanel {
JButton btnFire = new JButton("Fire!");
ButtonPannel() {
this.add(btnFire);
}
}

public class FireButton implements ActionListener {
public void actionPerformed(ActionEvent e) {
pnlCannon.addCannonBall();
System.out.println("Fire ZE MISSILES");
}
}
public class MouseMovement implements MouseMotionListener {

public void mouseDragged(MouseEvent e) {
double dBase, dHeight, dAngle;
dBase = e.getX() - pnlCannon.rectCannon.getX();
dHeight = pnlCannon.rectCannon.getY() - 5 - e.getY() + 10;
dAngle = Math.atan2(dHeight, dBase);
pnlCannon.dAngle = dAngle;
pnlCannon.repaint();
}//http://download.oracle.com/javase/tutori…

public void mouseMoved(MouseEvent e) {
}
}

public class MouseAction implements MouseListener {

public void mousePressed(MouseEvent e) {
double dBase, dHeight, dAngle;
dBase = e.getX() - pnlCannon.rectCannon.getX();
dHeight = pnlCannon.rectCannon.getY() - 5 - e.getY() + 10;
dAngle = Math.atan2(dHeight, dBase);
pnlCannon.dAngle = dAngle;
pnlCannon.repaint();
}

public void mouseReleased(MouseEvent e) {
}

public void mouseEntered(MouseEvent e) {
}

public void mouseExited(MouseEvent e) {
}

public void mouseClicked(MouseEvent e) {
} // From http://www.rgagnon

Body:
Try moving this bit:

if(isFired){
g2d.drawImage(imgBall, 0, 0, null);
}

before this line:

g2d.rotate(0 - dAngle, rectCannon.getX(), rectCannon.getY() + 5);

Any transformations you apply to your Graphics2D will affect anything from that point, so you have to either be careful to apply transforms when you need them, or to "un-apply" them before you don't need them.


问:
Solving linear equations - Math.LinearEquationSolver returns IO(Maybe[Rational])
I am writing a program to solve certain mathematical problems, and Haskell is the language I've written it in so far (for various reasons). At one point, I need to solve a system of linear equations, and then use the result for something else. I can give more details if needed, but didn't want to go crazy at first.

The easiest way I could find of solving linear equations was to use the Math.LinearEquationSolver module from the linearEqSolver package on hackage. Everything works fine, except that all of the methods (e.g. solveRationalLinearEqs) have a return type of IO (Maybe [Rational]). I want to be able to feed the solution into a method which accepts [Rational].

I know that the whole point of IO is that you can't just take stuff out of it and put it back in, but I haven't written Haskell in enough years now that I've forgotten all of what I used to know about IO.

Is there an easy explanation/example of what I should do? Is the simplest solution to use some other module/find some other way of solving the system of equations?

Edit: I have tried using the HMatrix method linearSolveLS but this returns a list of type [Double] (and is also nowhere near accurate enough for what I need, even if I did settle for a non-fractional type), whereas I would really prefer the return to be of type [Rational] (as in LinearEquationSolver).

答:
The most idiomatic way to do this is to use >>= to combine the IO action that produces your result with the rest of your program.

```<code>(>>=) :: Monad m => m  a                  -> (a                  -> m  b) -> m  b
(>>=) ::            IO (Maybe [Rational]) -> ((Maybe [Rational]) -> IO a) -> IO a
</code>```

You would use it like this:

```<code>(linearEqSolver arg1 arg2 arg3 ... argn) >>= \maybeResult -> case maybeResult of
  Just resultList -> (... :: IO a)
  Nothing -> (... :: IO a)
</code>```

Alternatively, if the rest of your code doesn't need IO, you can use fmap, or its infix synonym <$> to map a pure function over the result of linearEqSolver.

```<code>theRestOfYourCode :: Maybe [Rational] -> a
(theRestOfYourCode <$> (linearEqSolver arg1 arg2 ... argn)) :: IO a
</code>```

Note: Most of these type signatures are just for clarity, and can be inferred.

You could also use the Monad instance for Maybe in the same way, but pattern matching is clearer in this case, since it is hard to mentally parse expressions that use multiple Monad instances in general.

ContentLicense: CC BY-SA 3.0

Body:
The most idiomatic way to do this is to use >>= to combine the IO action that produces your result with the rest of your program.

(>>=) :: Monad m => m  a                  -> (a                  -> m  b) -> m  b
(>>=) ::            IO (Maybe [Rational]) -> ((Maybe [Rational]) -> IO a) -> IO a

You would use it like this:

(linearEqSolver arg1 arg2 arg3 ... argn) >>= \maybeResult -> case maybeResult of
  Just resultList -> (... :: IO a)
  Nothing -> (... :: IO a)

Alternatively, if the rest of your code doesn't need IO, you can use fmap, or its infix synonym <$> to map a pure function over the result of linearEqSolver.

theRestOfYourCode :: Maybe [Rational] -> a
(theRestOfYourCode <$> (linearEqSolver arg1 arg2 ... argn)) :: IO a

Note: Most of these type signatures are just for clarity, and can be inferred.

You could also use the Monad instance for Maybe in the same way, but pattern matching is clearer in this case, since it is hard to mentally parse expressions that use multiple Monad instances in general.


问:
In C++ is really a "reference" just an alias, instead of a "pointer"?
This code:

```<code>int main()
{
    int v[] = {0,10,45};

    for (auto& x : v) {
        cout << x << endl;
        x++;
    }
}
</code>```

Is giving this output:

0
10
45

So, why when "x" is being read is reading the value, but when "x" is modified is modifying the reference target?.

答:
So, why when "x" is being read is reading the value, but when "x" is modified is modifying the reference target?

"Modifying the reference target" can be interpreted in two ways, only one of which is correct.  I think you're thinking that x++ advances the reference to refer to the next element in the array, but that's not what it does.  x++ increments the current element in the array – equivalent to v[0]++, v[1]++, etc. – but it doesn't affect the output because the number has already been printed.

If you change the loop to:

```<code>for (auto& x : v) {
    x++;
    cout << x << endl;
}
</code>```

you'll get 1, 11, and 46 as output.

Body:
This code:

int main()
{
    int v[] = {0,10,45};

    for (auto& x : v) {
        cout << x << endl;
        x++;
    }
}

Is giving this output:

0
10
45

So, why when "x" is being read is reading the value, but when "x" is modified is modifying the reference target?.

Body:
So, why when "x" is being read is reading the value, but when "x" is modified is modifying the reference target?

"Modifying the reference target" can be interpreted in two ways, only one of which is correct.  I think you're thinking that x++ advances the reference to refer to the next element in the array, but that's not what it does.  x++ increments the current element in the array – equivalent to v[0]++, v[1]++, etc. – but it doesn't affect the output because the number has already been printed.

If you change the loop to:

for (auto& x : v) {
    x++;
    cout << x << endl;
}

you'll get 1, 11, and 46 as output.


答:
Use float property. It will be better to use a float:right in your css to make the white spaces go away. Please have a try

```<code>.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  float:right;
}
</code>```

Title: How do I get rid of the extra padding on these images?

Body:
Use float property. It will be better to use a float:right in your css to make the white spaces go away. Please have a try

.boardpic{
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  float:right;
}


问:
macOS Performance - 2.5.1:Your app uses or references the following non-public API
I submit the APP has been rejected several times to Mac AppStore. it is a video application which base on VLCKit, only used the third-party library also is VLCKit. here is the app rejection issue :

"Performance - 2.5.1

Your app uses or references the following non-public API(s):

'/System/Library/Frameworks/ApplicationServices.framework/Versions/A/ApplicationServices'

: CGSCreateRegisteredCursorImage

The use of non-public APIs is not permitted on the App Store as it can
  lead to a poor user experience should these APIs change.

Next Steps

If you have defined methods in your source code with the same names as
  the above-mentioned APIs, we suggest altering your method names so
  that they no longer collide with Apple's private APIs to avoid your
  application being flagged in future submissions.

Additionally, one or more of the above-mentioned APIs may reside in a
  library included with your application. If you do not have access to
  the library's source, you may be able to search the compiled binary
  using "strings" or "otool" command line tools. The "strings" tool can
  output a list of the methods that the library calls and "otool -ov"
  will output the Objective-C class structures and their defined
  methods. These techniques can help you narrow down where the
  problematic code resides.

If you are unable to reproduce this issue, ensure you are testing the
  exact version of the app that you submitted for review, and that
  you're doing so in a minimally privileged environment. See Technical
  Q&A QA1778: How to reproduce bugs reported against Mac App Store
  submissions.

For information on how to symbolicate and read a crash log, please see
  Technical Note TN2123 - CrashReporter."

That made me crazy , according Apple's feedback, I have used "strings","otool -L" and "otool -ov" , but didn't find relevant content. how to solve this problem? please tell me.thanks!

答:
VLC calls CGSCreateRegisteredCursorImage() in code used for screen capture.

You will probably need to remove this functionality from libvlc to make it pass App Store API checks.

More importantly, though, VLC (and libvlc) are licensed under the GPL. Please make sure your application will be compliant with this license before you proceed.


问:
Tersely determining how many times a pair exists in a longer list
I am in the middle of writing a large piece of code and I want to shorten a length or expression.
Let's say we have a list, something like:

```<code>farm = ["cow","cow","cow", "hen","hen","hen", "fox","fox","fox", "hen","hen", "hen"]
lookup = ["cow","hen"]
</code>```

I am supposed to check whether there are three consecutive elements of lookfor in farm list.

One way is to do:

```<code>for i in range (0,len(farm) - 2):
  if ((farm[i] == farm[i+1] == farm[i+2] == lookup[0])
     or (farm[i] == farm[i+1] == farm[i+2] == lookup[1])):
    # do something
</code>```

Now if the number of elements in lookup is small, it can be written in the above way. However, if it is too long the code looks cumbersome and is harder to maintain. Is there a more concise way of writing the code, perhaps in list comprehension format - so that I do not have to manually write to look for all the elements of lookup?

答:
try this

```<code>gr = [(k,len(list(ns))) for k,ns in itertools.groupby(farm)]
for k in lookup:
    if (k,3) in gr:
        print k
</code>```

will check for exact three consecutive keys.  For at least three, you can filter the groups by size and check whether each entry is in the lookup.

Body:
I am in the middle of writing a large piece of code and I want to shorten a length or expression.
Let's say we have a list, something like:

farm = ["cow","cow","cow", "hen","hen","hen", "fox","fox","fox", "hen","hen", "hen"]
lookup = ["cow","hen"]

I am supposed to check whether there are three consecutive elements of lookfor in farm list.

One way is to do:

for i in range (0,len(farm) - 2):
  if ((farm[i] == farm[i+1] == farm[i+2] == lookup[0])
     or (farm[i] == farm[i+1] == farm[i+2] == lookup[1])):
    # do something

Now if the number of elements in lookup is small, it can be written in the above way. However, if it is too long the code looks cumbersome and is harder to maintain. Is there a more concise way of writing the code, perhaps in list comprehension format - so that I do not have to manually write to look for all the elements of lookup?

Body:
try this

gr = [(k,len(list(ns))) for k,ns in itertools.groupby(farm)]
for k in lookup:
    if (k,3) in gr:
        print k

will check for exact three consecutive keys.  For at least three, you can filter the groups by size and check whether each entry is in the lookup.


问:
Swift_TransportException in Laravel 5.2 mail sending
I am trying to send mail for my laravel app from a gmail account with Allow less secure apps: ON and 2-Step Verification OFF

.env part for mail:

```<code>MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=library@gmail.com
MAIL_PASSWORD=********
MAIL_ENCRYPTION=ssl
</code>```

config/mail.php:

```<code>'driver' => env('MAIL_DRIVER', 'smtp'),
'host' => env('MAIL_HOST', 'smtp.gmail.com'),
'port' => env('MAIL_PORT', 587),
'from' => ['address' => 'library@gmail.com', 'name' => 'Admin'],
'encryption' => env('MAIL_ENCRYPTION', 'ssl'),
'username' => env('library@gmail.com'),
'password' => env('********'),
'sendmail' => '/usr/sbin/sendmail -bs',
'pretend' => env('MAIL_PRETEND', false),
</code>```

First I tried using 'encryption' => env('MAIL_ENCRYPTION','tls'). But got the following error message:

```<code>ERROR: exception 'Swift_TransportException' with message 'Expected
response code 250 but got code "530", with message "530-5.5.1
Authentication Required. Learn more at
530 5.5.1  https://support.google.com/mail/answer/14257
z3sm16020712par.17 - gsmtp"' in
/home/shafi/Projects/Lib/vendor/swiftmailer/swiftmailer/lib/classes/Swift/Transport/AbstractSmtpTransport.php:383
</code>```

I visited https://support.google.com/mail/answer/14257 and found everything is at the recommended state.

After this I used 'encryption' => env('MAIL_ENCRYPTION','ssl') but this time the same ERROR.

What should I do to fix the error? What am I missing?

答:
I had the same problem previously, the root cause was I changed the mail.php file.

To send email with smtp.gmail.com, you just need to change the configuration in .env file and enable allow less secure apps. Don't change anything in the mail.php file.

Body:
I am trying to send mail for my laravel app from a gmail account with Allow less secure apps: ON and 2-Step Verification OFF

.env part for mail:

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=library@gmail.com
MAIL_PASSWORD=********
MAIL_ENCRYPTION=ssl

config/mail.php:

'driver' => env('MAIL_DRIVER', 'smtp'),
'host' => env('MAIL_HOST', 'smtp.gmail.com'),
'port' => env('MAIL_PORT', 587),
'from' => ['address' => 'library@gmail.com', 'name' => 'Admin'],
'encryption' => env('MAIL_ENCRYPTION', 'ssl'),
'username' => env('library@gmail.com'),
'password' => env('********'),
'sendmail' => '/usr/sbin/sendmail -bs',
'pretend' => env('MAIL_PRETEND', false),

First I tried using 'encryption' => env('MAIL_ENCRYPTION','tls'). But got the following error message:

ERROR: exception 'Swift_TransportException' with message 'Expected
response code 250 but got code "530", with message "530-5.5.1
Authentication Required. Learn more at
530 5.5.1  https://support.google.com/mail/answer/14257
z3sm16020712par.17 - gsmtp"' in
/home/shafi/Projects/Lib/vendor/swiftmailer/swiftmailer/lib/classes/Swift/Transport/AbstractSmtpTransport.php:383

I visited https://support.google.com/mail/answer/14257 and found everything is at the recommended state.

After this I used 'encryption' => env('MAIL_ENCRYPTION','ssl') but this time the same ERROR.

What should I do to fix the error? What am I missing?


问:
Store Node JS express sessions using Azure Redis Cache
I have tried to build an Express 4 Web App using Azure. I found on several articles that I can store the sessions in Azure Redis Cache. However, how should I connect my web app to the redis cache?

```<code>var session = require('express-session');
var redis = require('redis');
var RedisStore = require('connect-redis')(session);
var client = redis.createClient(6380, 'MyHost', { auth_pass: 'MyPass', tls: { servername: 'MyHostName' } });

app.use(session({
    secret: 'keyboard cat',
    key: 'sid',
    resave: false,
    saveUninitialized: false,
    store: new RedisStore(client);
}));
</code>```

But then it returns an error when I run the app. Saying
TypeError: this.client.unref is not a function

How can I solve this? Thanks!

答:
You might make a mistake in RedisStore constructor.

Change the following line of code store: new RedisStore(client); as below:

```<code>store: new RedisStore({client: client});
</code>```

Body:
I have tried to build an Express 4 Web App using Azure. I found on several articles that I can store the sessions in Azure Redis Cache. However, how should I connect my web app to the redis cache?

var session = require('express-session');
var redis = require('redis');
var RedisStore = require('connect-redis')(session);
var client = redis.createClient(6380, 'MyHost', { auth_pass: 'MyPass', tls: { servername: 'MyHostName' } });

app.use(session({
    secret: 'keyboard cat',
    key: 'sid',
    resave: false,
    saveUninitialized: false,
    store: new RedisStore(client);
}));

But then it returns an error when I run the app. Saying
TypeError: this.client.unref is not a function

How can I solve this? Thanks!

Body:
You might make a mistake in RedisStore constructor.

Change the following line of code store: new RedisStore(client); as below:

store: new RedisStore({client: client});


问:
Error:(1772) No resource found that matches the given name: attr 'padding'
I am getting the error in the title. Here is the error log:

答: Line No 1771 in styles.xml change padding to android:padding


问:
How do I switch rows and columns in a 2D array?
I am working on a code that will create a visual Sierpinski triangle to 3D print, and in order for it to work I have to use a Pascal triangle algorithm that will create an array so I can use to tell my algorithm that will create my triangles where not to put triangles.

Anyway the problem is, that my code that arranges the triangles creates the triangles by column instead of by row like the Pascal algorithm does so I am just trying to do a quick fix by having a subroutine that rearranges the Pascal array. I am just stumped on how to do it since I am not sure how to avoid index out of range errors.

This is the code that creates the array for Pascal's triangle.

TL:DR I am trying to make an rearrange an array where rows are the columns and columns are the rows

```<code>def pascal(n):
    """Prints out n rows of Pascal's triangle."""
    row = [1]
    global array
    array = [[0 for x in range(int(n))] for y in range(int(n))]
    array[0]=row
    k = [0]
    for x in range(int(max(n,0)-1)):
       row=[l+r for l,r in zip(row+k,k+row)]
       array[x+1]=row
    return 1
</code>```

This is the output of printing the array. I just want the rows to be columns and columns to be rows

[[1],
 [1, 1],
 [1, 2, 1],
 [1, 3, 3, 1],
 [1, 4, 6, 4, 1],
 [1, 5, 10, 10, 5, 1],
 [1, 6, 15, 20, 15, 6, 1],
 [1, 7, 21, 35, 35, 21, 7, 1]]
```

<p>Here is the full code if you are curious about the project, but it requires <code>rhinoscriptsyntax</code> to make the model.</p>

```import rhinoscriptsyntax as rhino
import math

obj = rhino.GetObject("Select object to transform", preselect=True)
scale = 3
n=math.pow(3,scale)
def pascal(n):
   """Prints out n rows of Pascal's triangle."""
   row = [1]
   global array
   array = [[0 for x in range(int(n))] for y in range(int(n))]
   array[0]=row
   k = [0]
   for x in range(int(max(n,0)-1)):
      row=[l+r for l,r in zip(row+k,k+row)]
      array[x+1]=row
   return 1
pascal(math.pow(2,scale))
print array
def remakePascal():
    pass
my_horizontalVector = [[1,0,0,6],
           [0,1,0,0],
           [0,0,1,0],
           [0,0,0,1]]

my_tsfm = [[1,0,0,0],  #identity
           [0,1,0,0],
           [0,0,1,0],
           [0,0,0,1]]

def makeTriangle(scale,obj):
    w=1/scale
    h=1/scale
    tsfm= [[w,0,0,0],   #scale about origin
            [0,h,0,0],
            [0,0,1,0],
            [0,0,0,1]]
    output= rhino.XformMultiply(my_tsfm,tsfm)
    new_obj=rhino.TransformObject(obj,output,copy=True)
    return new_obj
def placeObj(i):
    my_moveUpVector = [[1,0,0,(3/scale)*i],
           [0,1,0,(4/scale)*i],
           [0,0,1,0],
           [0,0,0,1]]
    vector = rhino.XformMultiply(my_tsfm,my_moveUpVector)
    return vector
n=0
for i in range(int(math.pow(2,scale))):
    if(i>0):
       hPlace=rhino.XformMultiply(my_tsfm,my_horizontalVector)
       obj = rhino.TransformObject(obj,hPlace)
    factor = int(math.pow(2,scale))-n
    for j in range(factor):
        if():
            pass
        else:
            Vertobj=makeTriangle(scale,obj)
            tsfm = rhino.TransformObject(Vertobj,placeObj(j),copy=True)
    n=n+1
```

Body:
I am working on a code that will create a visual Sierpinski triangle to 3D print, and in order for it to work I have to use a Pascal triangle algorithm that will create an array so I can use to tell my algorithm that will create my triangles where not to put triangles.

Anyway the problem is, that my code that arranges the triangles creates the triangles by column instead of by row like the Pascal algorithm does so I am just trying to do a quick fix by having a subroutine that rearranges the Pascal array. I am just stumped on how to do it since I am not sure how to avoid index out of range errors.

This is the code that creates the array for Pascal's triangle.

TL:DR I am trying to make an rearrange an array where rows are the columns and columns are the rows

def pascal(n):
    """Prints out n rows of Pascal's triangle."""
    row = [1]
    global array
    array = [[0 for x in range(int(n))] for y in range(int(n))]
    array[0]=row
    k = [0]
    for x in range(int(max(n,0)-1)):
       row=[l+r for l,r in zip(row+k,k+row)]
       array[x+1]=row
    return 1

This is the output of printing the array. I just want the rows to be columns and columns to be rows

[[1],
 [1, 1],
 [1, 2, 1],
 [1, 3, 3, 1],
 [1, 4, 6, 4, 1],
 [1, 5, 10, 10, 5, 1],
 [1, 6, 15, 20, 15, 6, 1],
 [1, 7, 21, 35, 35, 21, 7, 1]]

Here is the full code if you are curious about the project, but it requires rhinoscriptsyntax to make the model.

import rhinoscriptsyntax as rhino
import math

obj = rhino.GetObject("Select object to transform", preselect=True)
scale = 3
n=math.pow(3,scale)
def pascal(n):
   """Prints out n rows of Pascal's triangle."""
   row = [1]
   global array
   array = [[0 for x in range(int(n))] for y in range(int(n))]
   array[0]=row
   k = [0]
   for x in range(int(max(n,0)-1)):
      row=[l+r for l,r in zip(row+k,k+row)]
      array[x+1]=row
   return 1
pascal(math.pow(2,scale))
print array
def remakePascal():
    pass
my_horizontalVector = [[1,0,0,6],
           [0,1,0,0],
           [0,0,1,0],
           [0,0,0,1]]

my_tsfm = [[1,0,0,0],  #identity
           [0,1,0,0],
           [0,0,1,0],
           [0,0,0,1]]

def makeTriangle(scale,obj):
    w=1/scale
    h=1/scale
    tsfm= [[w,0,0,0],   #scale about origin
            [0,h,0,0],
            [0,0,1,0],
            [0,0,0,1]]
    output= rhino.XformMultiply(my_tsfm,tsfm)
    new_obj=rhino.TransformObject(obj,output,copy=True)
    return new_obj
def placeObj(i):
    my_moveUpVector = [[1,0,0,(3/scale)*i],
           [0,1,0,(4/scale)*i],
           [0,0,1,0],
           [0,0,0,1]]
    vector = rhino.XformMultiply(my_tsfm,my_moveUpVector)
    return vector
n=0
for i in range(int(math.pow(2,scale))):
    if(i>0):
       hPlace=rhino.XformMultiply(my_tsfm,my_horizontalVector)
       obj = rhino.TransformObject(obj,hPlace)
    factor = int(math.pow(2,scale))-n
    for j in range(factor):
        if():
            pass
        else:
            Vertobj=makeTriangle(scale,obj)
            tsfm = rhino.TransformObject(Vertobj,placeObj(j),copy=True)
    n=n+1

Body:
You probably want something like this:

def pascal(n):
    a = [[int(i==0) for j in range(n)] for i in range(n)]
    for i in range(n):
        for j in range(1, 1+i):
            a[j][i] = a[j][i-1] + a[j-1][i-1]

    for line in a: print(line)

pascal(7)

this prints:

[1, 1, 1, 1, 1, 1, 1]
[0, 1, 2, 3, 4, 5, 6]
[0, 0, 1, 3, 6, 10, 15]
[0, 0, 0, 1, 4, 10, 20]
[0, 0, 0, 0, 1, 5, 15]
[0, 0, 0, 0, 0, 1, 6]
[0, 0, 0, 0, 0, 0, 1]


问:
Ignore methods by the php interpretor
It is possible in php to ignore some methods by the php interpretor? I need to ignore some methods or functions if the project is, for example, in the release mode, and executed them if  the project is in the debug mode.</p>

答:
If you're indeed talking about methods (not functions) then the solution is using Overloading:

```<code>class MyClass
{
  static public $debugging = true;

  public function __call($function, $arguments)
  {
    if (!self::$debugging)
      trigger_error("Cannot call $function in release mode!", E_USER_ERROR);
    return call_user_func_array(array($this,'__real_'.$function), $arguments);
  }

  protected function __real_debug($a,$b,$c)
  {
  // Do something here
  }
}
</code>```

Then for all not implicitly declared methods of MyClass, the overloaded __call method will be invoked. If you do:

```<code>$c = new MyClass();
$c->debug(1,2,3);
</code>```

Then, if $debugging is true, the protected __real_debug is called.

BTW: the above sample is not restricted to PHP 5.3. It works for any PHP 5.x version.

Title: Ignore methods by the php interpretor

Body:
If you're indeed talking about methods (not functions) then the solution is using Overloading:

class MyClass
{
  static public $debugging = true;

  public function __call($function, $arguments)
  {
    if (!self::$debugging)
      trigger_error("Cannot call $function in release mode!", E_USER_ERROR);
    return call_user_func_array(array($this,'__real_'.$function), $arguments);
  }

  protected function __real_debug($a,$b,$c)
  {
  // Do something here
  }
}

Then for all not implicitly declared methods of MyClass, the overloaded __call method will be invoked. If you do:

$c = new MyClass();
$c->debug(1,2,3);

Then, if $debugging is true, the protected __real_debug is called.

BTW: the above sample is not restricted to PHP 5.3. It works for any PHP 5.x version.


问:
Unable to connect to mongodb Error: couldn't connect to server 127.0.0.1:27017 at src/mongo/shell/mongo.js:L112
When ever I try to connect to mongo db I always get this error as below.

MongoDB shell version: 2.4.3
connecting to: test
Fri Apr 26 14:31:46.941 JavaScript execution failed: Error: couldn't connect to server 127.0.0.1:27017 at src/mongo/shell/mongo.js:L112
exception: connect failed

I tried various solutions listed in stackoverflow and tried following commands but nothing works.

1) sudo rm /var/lib/mongodb/mongod.lock

// says such file located at this place.

2)  sudo service mongodb start

// error: sudo: service: command not found

3) I've made sure nothing else is running at that port.

4) Even tried uninstalling and installing it again.

5) Also tried kill pid

答: with new version of mongodb, this issue got resolved. </p>


问:
Get documents which matches the most number of items from a given array
I have a collection with documents like this:

```<code>{
   "User": { _id: 1, UserName: "username", DisplayName: "DisplayName" },
   "Interests": [1, 4, 7, 25, 30, 34, 46],
   "MinAge": 11,
   "Title": "ad title",
   ...
}
</code>```

I want to select the 10 documents which matches the most number of interests from a given array, like:

```<code>array = [1,7, 30, 33, 38, 46, 55];
</code>```

How could I do that?

答:
You can achieve it with unwinding and grouping. You will have to group on unique identifier.</p>

```<code>db.colName.aggregate(
    {$unwind: '$Interests'},
    {$match: {Interests: {$in: [1,7, 30, 33, 38, 46, 55]}}},
    {$group: {_id: '$User.UserName', count: {$sum:1}}},
    {$sort: {count: -1}},
    {$limit: 10}

)
</code>```

Body:
I have a collection with documents like this:

{
   "User": { _id: 1, UserName: "username", DisplayName: "DisplayName" },
   "Interests": [1, 4, 7, 25, 30, 34, 46],
   "MinAge": 11,
   "Title": "ad title",
   ...
}

I want to select the 10 documents which matches the most number of interests from a given array, like:

array = [1,7, 30, 33, 38, 46, 55];

How could I do that?

Body:
You can achieve it with unwinding and grouping. You will have to group on unique identifier.

db.colName.aggregate(
    {$unwind: '$Interests'},
    {$match: {Interests: {$in: [1,7, 30, 33, 38, 46, 55]}}},
    {$group: {_id: '$User.UserName', count: {$sum:1}}},
    {$sort: {count: -1}},
    {$limit: 10}

)


问:
Enum save failing, error message not displayed
I am new to MVC.  I have defined an enum for UnitOfMeasure in my Ingredient table, as follows:

```<code>public enum UnitOfMeasure
{
    oz=1,
    lb=2,
    ml=3,
    liter=4,
    gal=5
}
</code>```

I have defined the corresponding field as follows:

```<code>[Required]
[Range(1, int.MaxValue, ErrorMessage = "Please make a selection")]
public UnitOfMeasure? UnitOfMeasure { get; set; }
</code>```

"Please select", as desired, is displayed as the default value in the view, but I want the user to have to make a selection before the save.  I am using EnumDropDownListFor as follows in the view.

```<code> @Html.EnumDropDownListFor(model => model.UnitOfMeasure,
                              "--Please select--",
                              new { @class = "form-control" })
</code>```

Two problems. First, the error message is not appearing when the user doesn't make a selection, and second, I cannot save any selection at all (apparently no selection matches the range criterion).  What am I doing wrong?

答:
If the form is not submitting, but no error message is displayed, it means that you have not included the placeholder for the message. You need to include

```<code>@Html.ValidationMessageFor(m => m.UnitOfMeasure)
</code>```

The jquery.validate.unobtrusive.js plugin parses the data-val-* attributes in the html generated by your EnumDropDownListFor() method, and add the rules to jquery.validate.js, including passing the element that acts as the placeholder for the message. In you case, there is none, so nothing can be displayed, but the form is invalid and is not submitted.

Note that you [Range] attribute is unnecessary since the [Required] attribute already means that you must select one of the enum values. You can simply use

```<code>[Required(ErrorMessage = "Please make a selection")]
public UnitOfMeasure? UnitOfMeasure { get; set; }
</code>```

Body:
I am new to MVC.  I have defined an enum for UnitOfMeasure in my Ingredient table, as follows:

public enum UnitOfMeasure
{
    oz=1,
    lb=2,
    ml=3,
    liter=4,
    gal=5
}

I have defined the corresponding field as follows:

[Required]
[Range(1, int.MaxValue, ErrorMessage = "Please make a selection")]
public UnitOfMeasure? UnitOfMeasure { get; set; }

"Please select", as desired, is displayed as the default value in the view, but I want the user to have to make a selection before the save.  I am using EnumDropDownListFor as follows in the view.

 @Html.EnumDropDownListFor(model => model.UnitOfMeasure,
                              "--Please select--",
                              new { @class = "form-control" })

Two problems. First, the error message is not appearing when the user doesn't make a selection, and second, I cannot save any selection at all (apparently no selection matches the range criterion).  What am I doing wrong?

Body:
If the form is not submitting, but no error message is displayed, it means that you have not included the placeholder for the message. You need to include

@Html.ValidationMessageFor(m => m.UnitOfMeasure)

The jquery.validate.unobtrusive.js plugin parses the data-val-* attributes in the html generated by your EnumDropDownListFor() method, and add the rules to jquery.validate.js, including passing the element that acts as the placeholder for the message. In you case, there is none, so nothing can be displayed, but the form is invalid and is not submitted.

Note that you [Range] attribute is unnecessary since the [Required] attribute already means that you must select one of the enum values. You can simply use

[Required(ErrorMessage = "Please make a selection")]
public UnitOfMeasure? UnitOfMeasure { get; set; }


问:
Handsontable in VueJS, table loads only on page reload
I am using Handsontable with vanilla javascript inside a VueJS single page application. Using the following listener:

```<code>document.addEventListener('DOMContentLoaded', function() ...
</code>```

the table only appears on a page refresh, not initial load. I also tried using:

```<code>document.addEventListener('load', function() ...
</code>```

but the table doesn't show at all (also doesn't show if I remove the DOMContentLoaded listener). Some of the examples on the handsontable site eg https://docs.handsontable.com/0.18.0/demo-bootstrap.html  use the DOMContentLoaded listener others don't use any listener.

The VueJS page code is below.

TableView.vue:

```<code><template>
    <div id="example"></div>
</template>

<script>
import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.full.css'
export default {
  name: 'TablesView',
  data () {
    return {
      tableData: {}
  }
},
created: function () {
  this.populateHot()
},
methods: {
  populateHot: function() {
    document.addEventListener('DOMContentLoaded', function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
    })
  }
}
</script>
</code>```

I tried moving the Handsontable code outside the VueJS export default block ie:

```<code><script>
import ....
var hotData = []
export default {...
// update hotData with ajax loaded data
}
function initializeHandsOn() {...}
document.addEventListener('DOMContentLoaded', initializeHandsOn(), false)
</script>
</code>```

But I get an error thrown by handsontable.js:

```<code>Uncaught TypeError: Cannot read property 'insertBefore' of null(…)
</code>```

Any ideas on how best to integrate Handsontable with VueJS? (I tried vue-handsontable and vue-handsontable-official but had problems getting either to work)?

答:
You can try by removing the event listner: document.addEventListener('DOMContentLoaded' and directly execute this code on mounted, as mounted in vue is roughly equivalent of DOMContentLoaded, like following:

```<code><script>
import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.full.css'
export default {
  name: 'TablesView',
  data () {
    return {
      tableData: {}
  }
},
mointed: function () {
  this.populateHot()
},
methods: {
  populateHot: function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
  }
}
</script>
</code>```

Body:
I am using Handsontable with vanilla javascript inside a VueJS single page application. Using the following listener:

document.addEventListener('DOMContentLoaded', function() ...

the table only appears on a page refresh, not initial load. I also tried using:

document.addEventListener('load', function() ...

but the table doesn't show at all (also doesn't show if I remove the DOMContentLoaded listener). Some of the examples on the handsontable site eg https://docs.handsontable.com/0.18.0/demo-bootstrap.html  use the DOMContentLoaded listener others don't use any listener.

The VueJS page code is below.

TableView.vue:

<template>

</template>

I tried moving the Handsontable code outside the VueJS export default block ie:

But I get an error thrown by handsontable.js:

Uncaught TypeError: Cannot read property 'insertBefore' of null(…)

Any ideas on how best to integrate Handsontable with VueJS? (I tried vue-handsontable and vue-handsontable-official but had problems getting either to work)?

Body:
You can try by removing the event listner: document.addEventListener('DOMContentLoaded' and directly execute this code on mounted, as mounted in vue is roughly equivalent of DOMContentLoaded, like following:

<script>
import Handsontable from 'handsontable'
import 'handsontable/dist/handsontable.full.css'
export default {
  name: 'TablesView',
  data () {
    return {
      tableData: {}
  }
},
mointed: function () {
  this.populateHot()
},
methods: {
  populateHot: function() {
      var data = [
        ['', 'Kia', 'Nissan', 'Toyota', 'Honda', 'Mazda', 'Ford'],
        ['2012', 10, 11, 12, 13, 15, 16],
        ['2013', 10, 11, 12, 13, 15, 16]
      ]
      var container1 = document.getElementById('example')
      var hot1 = new Handsontable(container1, {
        data: data,
        startRows: 2,
        startCols: 5
      })
  }
}
</script>