html与svg中js交互_SVG中的交互式彩色照片高光效果

html与svg中js交互

Quite some time ago a reader asked for my help in creating a special UI effect for a German skateboard club: mouseover (or touch) any skater in the photo above to see the effect.

相当一段时间以前,一位读者在我的帮助下为德国滑板俱乐部创建了特殊的UI效果:将鼠标悬停在(或触摸)上图中的任何溜冰者以查看效果。

The creative process was unique enough to deserve a two-part series: this article analyses the workflow and code for the effect, while a follow-up will detail the information popups for each skater.

创作过程非常独特,值得分两部分进行:本文分析了效果的工作流程和代码,而后续活动将详细介绍每个溜冰者的信息弹出窗口。

命中地区 (Making The Hit Areas)

The core of the effect required two copies of the image: one in , and the other as a background. The “hotspot” areas for each skater would serve two functions: a general hit area for the skater, and a mask that would be applied to that portion of the image.

效果的核心需要图像的两份副本:一份在 ,另一份作为背景。 每个滑冰者的“热点”区域将具有两个功能:滑冰者的常规打击区域和将应用于图像的该部分的蒙版。

alt
Skater paths in PhotoShop, before export
导出前在PhotoShop中的溜冰者路径

Creating the paths by hand in Adobe Illustrator wouldn’t work well: the image was a little too complex for Trace to work. Instead, I used PhotoShop’s Magnetic Lasso tool. The selection made for each skater was saved as a path, and

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值