在CSS中以不同方式为图像的多个部分

在CSS中以不同方式为图像的多个部分

本文介绍了在CSS中以不同方式为图像的多个部分着色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我遇到类似于,但是有一双鞋。问题是鞋子有多个部分(鞋跟,鞋跟,鞋底......),我需要让用户改变每个部分的颜色。我正在使用jQuery或一些基于Javascript的框架。

I have a problem similar to How to change color of an image using jquery, but with a shoe. The problem is the shoe has multiple parts (heel, front, sole..) and i need to let the user change the color of each part. I'm working in jQuery or some Javascript-based framework.

最好的办法是什么?
有没有办法定义图像中要独立着色的区域?
或者应该将鞋子分成多个图像并将它们与CSS一起使用? (我不喜欢这个想法......)或者......以上都没有? :)

What's the best approach for this?Is there a way of defining areas in an image to be colored independently?Or should divide the shoe in multiple images and get them together with CSS? (I don't like this idea...) Or.. none of the above? :)

推荐答案

RaphaelJS is worth a look for that solution. Look at their World Map example

事实上,如果您有预计算的平均值或修复您的鞋子部件并在其上设置坐标,您将能够在鞋子上方绘制和填充SVG多边形。困难的部分是知道或确定轮廓路径的坐标...

In fact, if you have a mean of precompute or fix your shoe part and set coordinates on it, you'll be able to draw and fill SVG polygons above the shoe. The difficult part is to know or determine the contour path's coordinates...

使用RaphaelJS作为其重叠

This site is using RaphaelJS for its overlays

这篇关于在CSS中以不同方式为图像的多个部分着色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 10:21