JavaScript 实战3

最新推荐文章于 2023-01-02 21:10:43 发布

zhc_24

最新推荐文章于 2023-01-02 21:10:43 发布

阅读量186

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/zhc_24/article/details/78724193

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下面是事件部分：

let schCompModel = undefined;//存储选择的器件
let schCompModelCopy = undefined;//存储的拷贝
let schState = {//元器件元素的状态 原始状态0，被放置的状态1，移动状态2
  none: 0,
  placing: 1,
  moving: 2,
};//statement structure 状态的结构体
let schCurrent = schState.none;//元器件的当前状态
let schPrevX = 0;
let schPrevY = 0;//存储最后位置的鼠标坐标
let keyList = undefined;//key值列表
//let comp = undefined;

用按钮和组件绑定事件：

因为ev是事件的参数啊！在ev中包含了事件触发时的参数，比如click事件的ev中包含着.e.pageX,e.pageY,keydown事件中包含着ev.keyCode等，在ie中，ev是全局的可以通过window.event来获取，在其他浏览器中都是作为参数传入的。
所以好多事件函数都是这样写：

mydiv.onclick = function(ev){
  if(!ev){ev = window.event;} //这句也可以简写成：ev=window.event||ev;
  alert(ev.pageX+","+ev.pageY);
}

mousedown([[data],fn])
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mousedown 与 click 事件不同，mousedown 事件仅需要按键被按下，而不需要松开即可发生。
data:mousedown([Data], fn) 可传入data供函数fn处理。
fn:在每一个匹配元素的mousedown事件中绑定的处理函数。

splice() 方法用于插入、删除或替换数组的元素
注意：这种方法会改变原始数组！。
array.splice(index,howmany,item1,…..,itemX)
index 必需。规定从何处添加/删除元素。
该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
howmany 必需。规定应该删除多少元素。必须是数字，但可以是 “0”。
如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX 可选。要添加到数组的新元素

//这个js片段是我在用raphael画图的时候动态的确定鼠标的坐标时用到的。
//适用场景：当你想动态的获取鼠标当前坐标时
<script type="text/javascript">
  window.onload=function(){
      var mydiv = document.createElement("div"); 
      mydiv.setAttribute("id","hint"); 
      mydiv.style.position="absolute"; 
      mydiv.style.lineHeight="10px"; 
      mydiv.style.width="40px"; 
      mydiv.style.borderStyle="solid"; 
      mydiv.style.borderColor="#000000"; 
      mydiv.style.borderWidth="1px";   
      mydiv.style.height="20px"; 
      mydiv.style.display="none"; 
      document.body.appendChild(mydiv); 
      document.addEventListener("mousemove",function(e){
          var myhint = document.getElementById("hint");
          myhint.style.display= "block";
          myhint.style.left= e.clientX+"px";
          myhint.style.top= e.clientY+"px";
          myhint.innerHTML="x坐标："+e.clientX+"，y坐标： "+e.clientY;
      });
  }
</script>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
</head>
<body>
<canvas id="canvasId" width="400" height="400" style="background-color: #eee;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
var flag = false;
var tc = document.createElement("canvas");
tc.width = canvas.width;
tc.height = canvas.height;
var tctx = tc.getContext("2d");
var x = 0;
var y = 0;
canvas.onmousedown = function (e) {
    e = e || window.event;
    x = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
    y = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
    flag = true;
    tctx.drawImage(canvas,0,0,canvas.width,canvas.height);
}
canvas.onmousemove = function (e) {
    if (!flag) return;
    e = e || window.event;
    var gx = e.clientX - canvas.offsetLeft + (document.body.scrollLeft || document.documentElement.scrollLeft);
    var gy = e.clientY - canvas.offsetTop  + (document.body.scrollTop || document.documentElement.scrollTop);
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.drawImage(tc,0,0,canvas.width,canvas.height);
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(gx,gy);
    ctx.stroke();
}
canvas.onmouseup = function (e) {
    flag = false;

zhc_24

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 实战3

下面是事件部分：let schCompModel = undefined;//存储选择的器件let schCompModelCopy = undefined;//存储的拷贝let schState = {//元器件元素的状态原始状态0，被放置的状态1，移动状态2 none: 0, placing: 1, moving: 2,};//statement structure 状态的结
复制链接

扫一扫

专栏目录