يتم إزاحة علامة قماش على صفحتي
-
27-10-2019 - |
سؤال
أحاول ببساطة تتبع الماوس فوق علامة قماش بلدي ، وتسجيل مدى هو من مركز الدائرة.المشكلة هي ، انها قبالة قليلا.
عندما أكون على الجانب الأيمن من الدائرة ، يجب أن يكون الماوس حوالي 1 سم داخل الدائرة قبل أن أظهر مسافة ص (نصف القطر = 200).عندما أكون على الجانب الأيسر من الدائرة ، يجب أن أكون حوالي 1 سم خارج الدائرة لتسجيل مسافة ص.انها مثل تحول دائرة صبي إلى اليمين.
حاولت إعادة إنتاج هذا مع كمان, ، لكن الغريب أن الكمان مثالي;انها على الفور.
لذلك أعتقد أن سؤالي هو ، ما الذي قد يتسبب في تغيير علامة القماش الخاصة بي حوالي 1 سم على صفحتي (ولكن ليس على الكمان).هل أحتاج إلى نوع دوكتيب أفضل?أعيد إنتاج مصدري بالكامل أدناه.لقد اختبرت في كل من فف وكروم—نفس النتيجة.
تحرير
حاولت أيضا <!DOCTYPE html>
دون جدوى.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var context = document.getElementById("myCanvas").getContext("2d");
context.beginPath();
context.moveTo(250, 250);
context.arc(250, 250, 200, 0, Math.PI * 2, false);
context.closePath();
context.fillStyle = 'rgb(255,100,0)';
context.fill();
$("canvas").mousemove(function (e) {
var x = e.pageX;
var y = e.pageY;
var dist = Math.round(Math.sqrt(Math.pow(x - 250.0, 2) + Math.pow(y - 250.0, 2)));
console.log(dist);
});
});
</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="800">
</canvas>
</body>
</html>
المحلول
نعم ، في الواقع يبدو أن body{margin:0, padding:0, border:0}
هل الحيلة.أيضا ، في ملاحظة جانبية ، بدلا من استدعاء جميع وظائف الرياضيات هذه ، سيكون ما يلي أبسط وأسرع:
var x = e.pageX - 250;
var y = e.pageY - 250;
var dist = Math.round(Math.sqrt(x * x + y * y));
أيضا ، باستخدام كس إعادة تعيين كيت من المحتمل أن يحل جميع مشاكلك لجميع المتصفحات.
كنت أشعر بالفضول ، لذلك راجعت الإعدادات الافتراضية:
var bodyElement = $('body');
// Get the padding
var widthPadding = bodyElement.css('padding-left') + bodyElement.css('padding-right');
var heightPadding = bodyElement.css('padding-top') + bodyElement.css('padding-bottom');
console.log(widthPadding + ", "+ heightPadding);
// Get the margins
var widthMargin = bodyElement.css('margin-left') + bodyElement.css('margin-right');
var heightMargin = bodyElement.css('margin-top') + bodyElement.css('margin-bottom');
console.log(widthMargin + ", "+ heightMargin);
// Get the borders
var widthBorder = bodyElement.css('border-left-width') + bodyElement.css('border-right-width');
var heightBorder = bodyElement.css('border-top-width') + bodyElement.css('border-bottom-width');
console.log(widthBorder + ", "+ heightBorder);
كان الإخراج مثل هذا على فف 9.0.1 كان:
0px0px, 0px0px
8px8px, 8px8px <-- So obviously you only need to reset the margins to 0
0px0px, 0px0px