wpf或HTML5里插入图片，在图片上做标记，点击标记触发事件

WPF用RenderTransform实现，随便做了个，代码如下。

XAML

<Window x:Class="WpfApplication3.MainWindow"

        xmlns="

        xmlns:x="

        title="MainWindow"

        Height="350"

        Width="525">

    <Grid>

        <Image Name="image" Source="/WpfApplication3component/Images/Hydrangeas.jpg">

            <Image.RenderTransform>

                <TransformGroup>

                    <RotateTransform x:Name="rt"/>

                    <ScaleTransform x:Name="st"/>

                    <TranslateTransform x:Name="tt"/>

                </TransformGroup>

            </Image.RenderTransform>

        </Image>

        <StackPanel Orientation="Horizontal"

                    Height="20">

            <Button Name="btnScale1"

                    Content="缩小"

                    Click="btnScale1_Click" />

            <Button Name="btnScale2"

                    Content="放大"

                    Click="btnScale2_Click" />

            <Button Name="btnRotation1"

                    Content="左转"

                    Click="btnRotation1_Click" />

            <Button Name="btnRotation2"

                    Content="右转"

                    Click="btnRotation2_Click" />

            <Button Name="btnMove1"

                    Content="左移"

                    Click="btnMove1_Click" />

            <Button Name="btnMove2"

                    Content="右移"

                    Click="btnMove2_Click" />

            <Button Name="btnMove3"

                    Content="上移"

                    Click="btnMove3_Click"/>

            <Button Name="btnMove4"

                    Content="下移"

                    Click="btnMove4_Click" />

        </StackPanel>

    </Grid>

</Window>

CS如下

    namespace WpfApplication3

{

    /// <summary>

    /// MainWindow.xaml 的交互逻辑

    /// </summary>

    public partial class MainWindow : Window

    {

        public MainWindow()

        {

            InitializeComponent()

            DataContext = this

        }

        private bool _ischecked = false

        public bool IsChecked

        {

            get

            {

                return _ischecked

            }

        }

        private void btnScale1_Click(object sender, RoutedEventArgs e)

        {

            st.CenterX = image.ActualWidth / 2

            st.CenterY = image.ActualHeight / 2

            st.ScaleX -= 0.1

            st.ScaleY -= 0.1

        }

        private void btnScale2_Click(object sender, RoutedEventArgs e)

        {

            st.CenterX = image.ActualWidth / 2

            st.CenterY = image.ActualHeight / 2

            st.ScaleX += 0.1

            st.ScaleY += 0.1

        }

        private void btnRotation1_Click(object sender, RoutedEventArgs e)

        {

            rt.CenterX = image.ActualWidth / 2

            rt.CenterY = image.ActualHeight / 2

            rt.Angle -= 10

        }

        private void btnRotation2_Click(object sender, RoutedEventArgs e)

        {

            rt.CenterX = image.ActualWidth / 2

            rt.CenterY = image.ActualHeight / 2

            rt.Angle += 10

        }

        private void btnMove1_Click(object sender, RoutedEventArgs e)

        {

            tt.X -= 10

        }

        private void btnMove2_Click(object sender, RoutedEventArgs e)

        {

            tt.X += 10

        }

        private void btnMove3_Click(object sender, RoutedEventArgs e)

        {

            tt.Y -= 10

        }

        private void btnMove4_Click(object sender, RoutedEventArgs e)

        {

            tt.Y += 10

        }

    }

}

Click可以变通使用MouseLeftButtonUp事件

如果一定要添加Click，需要通过自定义路由事件，然后通过MouseLeftButtonUp方法中触发Click事件

---