0

キャンバスの全スペースを使用して描画する必要があります。しかし、ここではキャンバスの上部と左側を使用して描画できません。私はcssにいくつかの変更を加えようとしましたが、まだ運がありません。助けてください。ps ボタンをクリックすると、キャンバスがポップアップします。

<button onClick="openPopup();">click here</button>
<div id="test" class="popup">
    <div class="cancel" onclick="closePopup();"></div>
    <canvas id="canvas1" width="750" height="720" style="border: 1px solid black"></canvas>
</div>

<style>
.popup{
    position:absolute;
    top:0px;
    left:0px;
    margin:0px;
    width: 900px;
    height: 750px;
    font-family:verdana;
    font-size:13px;
    padding:2px;
    background-color:white;
    border:2px solid grey;
    z-index:100000000000000000;
    display:none;
    opacity:0.6;
    filter:alpha(opacity=60);
    margin-left: 300px;
    margin-top: 90px; 
    overflow: auto; 
    }

.cancel{
    display:relative;
    cursor:pointer;
    margin:0;
    float:right;
    height:10px;
    width:14px;
    padding:0 0 5px 0;
    background-color:red;
    text-align:center;
    font-weight:bold;
    font-size:11px;
    color:white;
    border-radius:3px;
    z-index:100000000000000000;
    }

.cancel:hover{
    background:rgb(255,50,50);
    }
</style>
<script>
function openPopup() {
    document.getElementById('test').style.display = 'block';
}
function closePopup() {
    document.getElementById('test').style.display = 'none';
}

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
var isPressed = false;
var mx = 4, my = 4;

function move(e) {
  getMouse(e);
  if (isPressed) {
    ctx.lineTo(mx, my);
    ctx.stroke()
  }
}

function up(e) {
  getMouse(e);
  isPressed = false;
}

function down(e) {
  getMouse(e);
  ctx.beginPath();
  ctx.moveTo(mx, my);
  isPressed = true;
}

can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;

// waaaay oversimplified:
function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX;
    my = e.pageY;

}

</script>
4

1 に答える 1

0

描画ポイントはマウス ポインターと同期されません。これが、キャンバスの左端付近に何かを描画しようとすると、マウスが既にキャンバスの外にあるため、キャンバスの左部分と上部に描画できない理由です。

描画ポイントの現在の位置を取得する方法に注意してください。

function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX;
    my = e.pageY;
}

変数eは mouseEvent オブジェクトを参照します。e.pageX は、キャンバスではなく、マウスとページの左側との間の距離を意味します。したがって、キャンバスの左オフセットを から差し引いてmxに同じことを行う必要がmyあります。これにより、描画ポイントが目的の場所に正しくなります。

1 つの簡単な解決策: キャンバスのmargin,borderとpaddingを 0 に設定します。

.popup{
    //everything else..
    boder: 0;
    margin-left: 0px;
    margin-top: 0px;
    }

mxより良い解決策:とへの左オフセットを引いたものmy

function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX - 305;
    my = e.pageY - 95;

    //Dynamically getting those padding and margin and border would be better!
}
于 2013-06-18T07:03:28.950 に答える