Question

我与IONIC 2合作。我想在图片上绘制不同的圆圈，并将不同圆圈的位置（x; y）存储到数据库中，半径相同（50px）。因为我有不同的图片，我希望用户在图片之间滑动，我使用了离子滑动标签。但我现在卡住了，因为我没有成功加入离子幻灯片和画布。所以我搜索了将图像放在画布的背景中，但我想知道我是否正在顺利进行。我想混合离子滑动和画布（或其他解决方案）。

我请求帮助给我一个方法。

首先，我尝试了这个解决方案：

  <ion-slides loop="false" slidesPerView="1" (ionSlideDidChange)="getCurrentIndex()">
    <ion-slide #currentSlide *ngFor="let thumb of thumbs; let id = index">
      <canvas #myCanvas (touchstart)="handleStart($event)"> 
        <img [src]="thumb" *ngIf="thumb" />
      </canvas>
    </ion-slide>
  </ion-slides>

但我的物理设备屏幕上没有任何内容。

当我尝试使用canvas标签和JS绘制图像的混合解决方案时，我没有成功地正确调整大小：

this._CONTEXT = this._CANVAS.getContext('2d');
var img = new Image();
img.src = "assets/imgs/1.jpg";
var context = this._CONTEXT;
img.onload = function() {
  context.drawImage(img, 0, 0);
}

最后，我想知道每张幻灯片的尺寸（高度和宽度）是否更好，并使用画布创建另一个div并使用CSS将div放在离子上方 - 滑动。你觉得怎么样？

感谢您的帮助！

在画布之间滑动（离子幻灯片+画布+图像）

0 个答案: