canvas轨迹重绘（点击标题回退到任意标记点）

weixin_46276411

于 2021-05-08 16:50:56 发布

阅读量338

点赞数

文章标签：前端 canvas vue

本文链接：https://blog.youkuaiyun.com/weixin_46276411/article/details/116533387

版权

博客探讨了如何在前端使用Canvas实现轨迹重绘，并详细介绍了如何为标注绑定点击事件，通过data函数和计算属性来实现功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

给标注绑定点击事件

   <!-- 标注 -->
      <div class="tool mark" v-show="showmark">
        <h4>标记信息</h4>
        <div class="mark-box" v-for="(item, index) in markmsg" :key="index">
          <div class="mark-circle">
            <div class="mark-title">
              <p @click="markTitle(index)">标注{
   {
    index + 1 }}&emsp;</p>
              <p @click="delBtn(index)">x</p>
            </div>
            <div class="mark-time">
              <p>时间点:&emsp;</p>
              <p>{
   {
    item.pausetime }}</p>
            </div>
            <div class="mark-msg">
              <p>标注信息:&emsp;</p>
              <p class="mark-content">{
   {
    item.content }}</p>
            </div>
          </div>
        </div>
      </div>

data函数

 data(){
   
 return{
   
 lastLoc: {
    x: 0, y: 0, width: 0,

最低0.47元/天解锁文章