Question

我正在尝试实现一些我用coffeescript和angular找到的javascript代码。这是stackoverflow上的代码：area-hovering

但是，每当我将画布附加到图像时，我的ng-mouseover函数都不会被调用。我唯一的猜测是，覆盖画布会以某种方式阻止角度看到鼠标悬停在区域多边形上。

以下是目前的代码：

AngularJS Coffeescript Code

angular.module 'myApp'
.controller 'myCtrl', ($scope) ->
  context2d = {}


  $scope.onInit = ->
    img = document.getElementById 'img-map' 
    can = document.getElementById 'myCanvas' 

    x = img.offsetLeft
    y = img.offsetTop
    w = img.offsetWidth
    h = img.offsetHeight

    imgParent = img.parentNode
    #imgParent.appendChild can

    can.style.zIndex = 1
    can.style.left = x + 'px'
    can.style.top = y + 'px'
    can.setAttribute 'width', w + 'px'
    can.setAttribute 'height', h + 'px'

    context2d = can.getContext '2d'
    context2d.fillStyle = 'red'
    context2d.strokeStyle = 'red'
    context2d.lineWidth = 2

    console.log 'safe'

$scope.onEnter = ->
  console.log 'test1'

常规HTML代码段

<div class="img-map-container" ng-init="onInit()">
  <center canvas id="myCanvas"></canvas>
  <img src="assets/images/map.png" width="640" height="512" alt="da map" id="img-map" usemap="#mymap">
  <map name="mymap">
    <area shape="poly"
          ng-mouseover="onEnter()" 
          coords="385,140,410,245,425,255,510,255,510,140"
          href=""
          alt=""
          title=""
          class="img-map-area"
          id="img-map-area-1" />
  </map>
</div>

非常感谢任何帮助。：）

当画布覆盖时，ng-mouseover不调用我的函数

0 个答案: