0

我正在使用角度 8，我想使用 maphilight 在图像映射中选择一个预定义的部分，例如（鼻子，眼睛，...）：

在此处输入图像描述

我已经使用此命令安装了 maphilight >>> npm i ng-maphilight --save 在我的 app.module.ts 中，我已将 MaphilightModule 添加到导入数组中。在我的组件 (html) 中，maphilight 地图被添加为容器元素

 <div class="body-img">
    <maphilight
            id="statesMap"
            [hidden]="hidden"
            [config]="config"
          >
            <img src="../../assets/image1.png" class="map" alt="bodyChart" usemap="#bodyChart" >

            <span *ngFor="let c of bodyAreas; let pickIndex=index; let count=index">
                <span *ngIf="c.picked" (click)="pick(pickIndex)" class="pick-span"
                    [ngStyle]="c.style">{{ c.title }} </span>
            </span>
        <map name="bodyChart" >
            <area *ngFor="let c of bodyAreas; let areaIndex=index" [title]="c.title" [alt]="c.alt" [shape]="c.shape" [coords]="c.coords" (click)="pick(areaIndex)" />
        </map>
    </maphilight>
  </div>

在 myComponent (ts) 中，我使用了 maphilightComponent 如下 >>

@ViewChild(MaphilightComponent, {static: false}) maphilightComponent: MaphilightComponent;
hidden = false
  public config = {
    fade: true,
    alwaysOn: false,
    neverOn: false,

    // fill
    fill: true,
    fillColor: '#ffffff',
    fillOpacity: 0.4,

    // stroke
    stroke: true,
    strokeColor: '#4d0ec0',
    strokeOpacity: 1,
    strokeWidth: 1,

    // shadow:
    shadow: true,
    shadowColor: '#000000',
    shadowOpacity: 0.8,
    shadowRadius: 10
  }

 ngAfterViewInit() {
    // Make sure image is initially visible while maphilight.js loads (and *then* hide it).
    // Otherwise the $(img).height() in maphilight.js may return 0, which causes mouseover effect to break.
    // See also:
    // - https://stackoverflow.com/questions/1472303/jquery-get-width-of-element-when-not-visible-display-none
    // - https://stackoverflow.com/questions/2345784/jquery-get-height-of-hidden-element-in-jquery
    this.maphilightComponent.events.imgLoaded.subscribe(() => {
      console.log("img.height=", this.maphilightComponent.img.height,
                  "$(this.img).height()=", window.jQuery(this.maphilightComponent.img).height())
      //this.hidden = true
    })
    this.maphilightComponent.events.updateMaphilight.subscribe(() => {
      console.log('updateMaphilight')
    })
  }

我有这个错误

未捕获的错误：模板解析错误：无法绑定到“config”，因为它不是“maphilight”的已知属性。(" id="statesMap" [hidden]="hidden" [ERROR ->][config]="config" > [ERROR ->]) 在 JitCompiler._compileComponents (:4200/vendor.js:108430) at :4200 /vendor.js:108343 在 Object.then (:4200/vendor.js:84703) 在 JitCompiler._compileModuleAndComponents (:4200/vendor.js:108342)

请有任何建议。

4

2 回答 2

0

您已安装不支持的 npm 库版本，请使用https://www.npmjs.com/package/ng-maphilight

你应该使用npm i ng-maphilight --save而不是 npm i maphilight --save

请按照此处指定的步骤操作：https ://github.com/TylerRick/ng-maphilight

于 2019-12-18T11:30:02.667 回答
0

我认为你应该使用ng-maphilight而不是just maphilight，安装命令如下

npm i ng-maphilight --save

请检查文档

于 2019-12-18T11:30:19.880 回答